Vue.js 使用來自子組件的輸入更新父數據

Question

我正在使用 Vue.js 2 並嘗試使用子組件中的輸入來更新文件的描述。 我一直在閱讀一些相關問題並閱讀一些官方文檔以及.sync但我正在努力獲得我想要的結果，因為文件是一個對象列表。

這就是我一直在嘗試的。

 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

您快完成了，您可以在提供的代碼中看到正在發出子組件事件，但值為空。 問題是您沒有更新myDescription ，如果您將:value更改為v-model那么它將更新，因為v-model使用雙向綁定。

另外，如果你想更新文件描述，你可以這樣做：

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>