Estoy usando Vue.js 2 y estoy tratando de actualizar la descripción de un archivo usando una entrada en un componente secundario. He estado leyendo algunas preguntas relacionadas y leí algunos de los documentos oficiales junto con .sync , pero me cuesta obtener el resultado que quiero, ya que los archivos son una lista de objetos.
Esto es lo que he estado intentando.
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>Ya casi llega, puede ver en el código que proporcionó que el evento del componente secundario se está emitiendo pero el valor está vacío. El problema es que no está actualizando myDescription , si cambia su :value a v-model , entonces se actualizará, ya que v-model usa un enlace bidireccional.
Además, si desea actualizar la descripción del archivo, puede hacer lo siguiente:
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>