Блог

Я пытаюсь создать компонент, представляющий товар для покупок. У меня будет один из этих компонентов для каждого элемента в моем списке покупок. Я не знаю, как обновить родительские данные (список покупок) при редактировании дочернего элемента (элемент покупки)

Список покупок

 <template>
  <div id="app">
    <shopping-item
      v-for="(item, index) in shoppingList"
      :key="index"
      :propsName="item.name"
      :propsQuantity="item.quantity"
      @shoppingItemEdited="handleEdit"
    ></shopping-item>
  </div>
</template>

<script>
import ShoppingItem from "./components/ShoppingItem.vue";

export default {
  name: "App",
  components: {
    ShoppingItem,
  },
  data() {
    return {
      shoppingList: [
        { name: "apple", quantity: 8 },
        { name: "banana", quantity: 3 },
        { name: "kiwi", quantity: 7 },
        { name: "peach", quantity: 5 },
      ],
    };
  },
  methods: {
    handleEdit(itemEdited) {
      // How to get the index of the shopping-item that has been updated ?
      // shoppingList[???] = itemEdited
      console.log(itemEdited);
      // => {name: "white peach", quantity: "6"}
    },
  },
};
</script>
  

Товар для покупок

 <template>
  <div>
    <input v-model="name" placeholder="ex: banana" @change="updateParent" />
    <input
      v-model="quantity"
      type="number"
      placeholder="ex: 3"
      @change="updateParent"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      quantity: null,
    };
  },
  props: {
    propsName: String,
    propsQuantity: Number,
  },
  created() {
    this.name = this.propsName;
    this.quantity = this.propsQuantity;
  },
  methods: {
    updateParent() {
      this.$emit("shoppingItemEdited", {
        name: this.name,
        quantity: this.quantity,
      });
    },
  },
};
</script>
  

Итак, у меня есть несколько вопросов:

1. Как я могу узнать, что компонент witch вызвал событие ‘shoppingItemEdited’? Если бы я знал это, я мог бы узнать, какой элемент списка покупок я должен обновить.

2. Я красный, я не должен обновлять реквизиты в дочернем элементе, поэтому я создаю данные на основе реквизитов, это стандартный способ сделать это?

 this.name = this.propsName;
this.quantity = this.propsQuantity;
  

1. Просто передайте индекс обработчику: @shoppingItemEdited="handleEdit(index, $event)"
2. Нет, это не «стандартный» — created перехват вызывается только один раз при создании компонента, поэтому, если значение prop изменится позже (от родительского), data обновление не будет. Вероятно, в вашем случае это не проблема, но обычно его лучше использовать computed :

 computed: {
  name: {
    get() { return this.propsName },
    set(value) { 
      this.$emit("shoppingItemEdited", {
        name: value,
        quantity: this.quantity,
      }); 
    }
  }
}
  

… обработайте событие в родительском, и изменение будет распространяться (по реквизитам) на дочерний элемент