Vue.js update parent data with an input from a child component

Question

I'm using Vue.js 2 and I'm trying to update the description of a file using an input in a child component. I've been reading a few related questions and read some of the official docs along with .sync but I'm struggling to get the result I want since files is a list of objects.

Here's what I've been trying.

 Vue.component('myComponent', { props: ["file"], data() { return { myDescription: '', } }, mounted() { this.myDescription = this.file.description; }, template: ` <div> <label>{{ file.name }}</label> <br> <input type="text" @input="update":value="myDescription"></input> <br><br> </div> `, methods: { update() { this.$emit("update-description", this.myDescription, this.file); }, } }) var app = new Vue({ el: '#app', methods: { updateDescription(description, file) { console.log(description); } }, data: { files: [{ id: 1, name: "Hello", description: "", }, { id: 2, name: "World", description: "Foo", }, { id: 3, name: "John", description: "Bar", } ] } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> {{ files }} </div> <br> <my-component v-for="file in files":key="file.id":file="file" @update-description="updateDescription" /> </div>

Answer 1

You're almost there, you can see in the code you've provided that the child component event is being emitted but the value is empty. The problem is you're not updating myDescription , if you change your :value to v-model then it will update, as v-model uses two way binding.

Also, if you want to update the file description, you can just do:

file.description = description;

 Vue.component('myComponent', { props: ["file"], data() { return { myDescription: '', } }, mounted() { this.myDescription = this.file.description; }, template: ` <div> <label>{{ file.name }}</label> <br> <input type="text" @input="update" v-model="myDescription"></input> <br><br> </div> `, methods: { update() { this.$emit("update-description", this.myDescription, this.file); }, } }) var app = new Vue({ el: '#app', methods: { updateDescription(description, file) { console.log(description); file.description = description; } }, data: { files: [{ id: 1, name: "Hello", description: "", }, { id: 2, name: "World", description: "Foo", }, { id: 3, name: "John", description: "Bar", } ] } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> {{ files }} </div> <br> <my-component v-for="file in files":key="file.id":file="file" @update-description="updateDescription" /> </div>