在Vue中更新父数组中的子组件的正确方法是什么？

Question

I'm new to Vue and was hoping for some clarification on best practices.

I'm building an app that uses an array to keep a list of child components and I want to be able to update and remove components by emiting to the parent. To accomplish this I currently have the child check the parent array to find it's index with an "equals" method so that it can pass that index to the parent. This works fine for something simple but if my child components get more complex, there will be more and more data points I'll have to check to make sure I'm changing the correct one. Another way to do this that I can think of is to give the child component an ID prop when it's made and just pass that but then I'd have to handle making sure all the ids are different.

Am I on the right track or is there a better more widely accepted way to do this? I've also tried using indexOf(this._props) to get the index but that doesn't seem to work. Maybe I'm just doing something wrong?

Here's a simplified version of what I'm doing:

 // fake localStorage for snippet sandbox const localStorage = {} Vue.component('child', { template: '#template', data() { return { newName: this.name } }, props: { name: String }, mounted() { this.newName = this.name }, methods: { update() { this.$emit( "update-child", this.$parent.children.findIndex(this.equals), this.newName ) }, equals(a) { return a.name == this.name } } }) var app = new Vue({ el: '#app', data: { children: [] }, methods: { addNewChild() { this.children.push({ name: 'New Child', }) }, updateChild(index, newName) { this.children[index].name = newName } }, mounted() { if (localStorage.children) { this.children = JSON.parse(localStorage.children) } }, watch: { children(newChildren) { localStorage.children = JSON.stringify(newChildren) } } })

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <div id="app"> <button v-on:click="addNewChild">+ New Child</button> <hr /> <child v-for="child in children":key="children.indexOf(child)":name="child.name" @update-child="updateChild"> </child> </div> <script type="text/x-template" id="template"> <div> <p><b>Name: {{name}}</b></p> <input placeholder="Name" type="text" v-model="newName" /> <button @click="update">Update</button> <hr /> </div> </script>

Answer 1

The great thing about v-for is that it creates its own scope. With that in mind, you can safely reference child in the event handler. For example

<child 
  v-for="(child, index) in children"
  :key="index"
  :name="child.name"
  @update-child="updateChild(child, $event)"
/>

updateChild(child, newName) {
  child.name = newName
}

All you need to emit from your child component is the new name which will be presented as the event payload $event

update() {
  this.$emit("update-child", this.newName)
}

---

A quick note about :key ... it would definitely be better to key on some unique property of the child object (like an id as you suggested).

Keying on array indices is fine if your array only changes in size but if you ever decide to splice or sort it, Vue won't be able to react to that change correctly since the indices never change.