从父级传递给子级时，VueJS props 不一致

Question

我试图将一个 prop 从父组件传递到子组件，但子组件似乎无法正确获取该 prop。

这是父组件：

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields">
      <template #cell(actions)="row">
        <b-button
          size="sm"
          @click="openModal(row.item, row.index, $event.target)"
          class="mr-1"
        >
          Sua
        </b-button>
        <b-button size="sm" @click="row.toggleDetails" variant="danger">
          Xoa
        </b-button>
      </template>

      <template #row-details="row">
        <b-card>
          <ul>
            <li v-for="(value, key) in row.item" :key="key">
              {{ key }}: {{ value }}
            </li>
          </ul>
        </b-card>
      </template>
    </b-table>
    <item-update-modal
      ref="itemUpdateModal"
      :id="modalAttributes.id"
      :title="modalAttributes.title"
      :propItem="propItem"
    />
  </div>
</template>

<script>
import ItemInfoModal from "@/components/item/ItemInfoModal.vue";

export default {
  name: "ItemList",
  components: {
    "item-update-modal": ItemInfoModal,
  },
  props: {
    items: [],
  },
  data() {
    return {
      showModal: false, // Initially, the modal is hidden
      fields: [
        {
          key: "id",
          label: "Ma so",
          sortable: true,
          sortDirection: "desc",
          class: "text-center",
        },
        {
          key: "name",
          label: "Ten san pham",
          sortable: true,
          sortDirection: "desc",
        },
        {
          key: "description",
          label: "Mo ta",
          sortable: true,
        },
        {
          key: "specification",
          label: "Quy cach",
          sortable: true,
        },
        {
          key: "itemUnit",
          label: "Don vi",
          sortable: true,
          class: "text-center",
        },
        { key: "actions", label: "Chi tiet" },
      ],
      modalAttributes: {
        id: "itemUpdateModal",
        title: "Sua ban thanh pham",
      },
      propItem: {},
    };
  },
  methods: {
    openModal(item, index, button) {
      // Show the modal when the button is clicked
      this.propItem = JSON.parse(JSON.stringify(item));
      this.$root.$emit(
        "bv::show::modal",
        this.modalAttributes.id,
        button
      );
    },
    resetInfoModal() {
      this.modalAttributes.propItem = {};
    },
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
  },
};
</script>

我的子组件是：

<template>
  <div>
    <b-modal
      :id="id"
      v-model="showModal"
      centered
      :title="title"
      @ok="onSubmit"
      @show="openModal"
    >
      <b-form @reset="onReset">
        <b-form-group
          id="input-group-item-name"
          label="Ten san pham"
          label-for="input-item-name"
        >
          <b-form-input
            id="input-item-name"
            v-model="item.name"
            type="text"
            required
          ></b-form-input>
        </b-form-group>
        <b-form-group
          id="input-group-item-description"
          label="Mo ta san pham"
          label-for="input-item-description"
        >
          <b-form-input
            id="input-item-description"
            v-model="item.description"
            type="text"
            required
          ></b-form-input>
        </b-form-group>
        <b-form-group
          id="input-group-item-unit"
          label="Don vi"
          label-for="item-unit"
        >
          <b-form-select
            id="item-unit"
            v-model="item.itemUnit"
            :options="itemUnitOptions"
          ></b-form-select>
        </b-form-group>
        <b-form-group
          id="input-group-item-specification"
          label="Quy cach"
          label-for="input-item-specification"
        >
          <b-form-textarea
            id="input-item-specification"
            v-model="item.specification"
            type="text"
            rows="4"
            required
          ></b-form-textarea>
        </b-form-group>
      </b-form>
    </b-modal>
  </div>
</template>

<script>
import itemApi from "@/api/items";
export default {
  name: "ItemInfoModal",
  data() {
    return {
      showModal: false,
      item: { ...this.propItem },
      itemUnitOptions: [
        { value: "EA", text: "EA" },
        { value: "GR", text: "GR" },
      ],
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    propItem: { type: Object, required: false, default: () => {} },
  },
  methods: {
    openModal() {
      console.log(this.propItem);
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
    onSubmit(event) {
      event.preventDefault();
      if (this.item.id) {
        console.log("updating");
        itemApi.updateItem(this.item);
      } else {
        console.log("creating");
        itemApi.createItem(this.item);
      }
      this.$router.go(0);
    },
    onReset(event) {
      event.preventDefault();
      console.log(this.item);
      // Reset the updatedItem object
      this.item = {};
    },
  },
};
</script>

这是用户界面：

我试图用所选行项目的内容填充表单，但不知何故它不起作用。我尝试记录道具，但是第一次当我点击灰色按钮时，我得到了“{ob：观察者}”，然后我关闭了模态并再次打开了模态，这次我得到了我的“propItem”，但表格仍然没有按预期填写。

更新：我将我的项目复制到此：https://codesandbox.io/p/sandbox/vue3-371lz2

请帮忙。 非常感谢！

Answer 1

解决方案是观察提供的项目从父组件到子组件的变化。通过将其添加到子项中，它应该可以工作：

 watch: {
    propItem: {
      handler(currentItem) {
        this.item = currentItem
      }
    }
  },