我在从子组件更新正确的对象时遇到问题。
我的设置如下： 一个 ul 列表，其中包含我想要呈现或编辑的大部分数据。在“li”的一部分上，有一个子组件来显示那部分数据，它是连接到该对象的资源列表，并且还处理新资源的推送。
我还希望用户有一个按钮来启用行的编辑模式，然后是更新和取消按钮。
我面临的问题是弄清楚我应该编辑哪个对象然后保存。我现在正在做的是尝试将行中的数据复制到 mutableRow 中，然后我将其用作输入控件的模型，而当用户未处于编辑模式时显示实际的行数据。在更新方法中，我发布到数据库并更新了行对象。
ul
li(v-for="row in rows")
p(v-if="!row.editing") {{ row.name }}
input(v-else, v-model="mutableRow.name")
resources(:row="row")
button(v-if="!row.editing") Start edit
template(v-else)
button Update
button Cancel
这是正确的方法吗？如果是，我应该如何处理发送到我的子组件的道具？我试过通过 this.$parent.mutableRow 获取 mutableRow，我试过用 v-if 切换“resource(:row="row")”，如果在编辑模式下发送 mutableRow，但我结束了以某种方式更改组件中的两个对象。
我可以在这里使用另一种模式吗？
我认为您提到的“可变行”问题是通过传递rows[index]而不是row. 无论如何，这就是.sync工作所需要的。
下面的示例实现了我在评论中建议的内容：具有自己的数据副本和自己的编辑模式控件的单个组件。开始编辑时，道具数据将复制到本地数据。当您单击更新时，会发出一个事件，并且父级（通过sync）将编辑后的数据复制到行中。如果单击取消，则不会发出任何事件，并且编辑结束。
new Vue({
el: '#app',
data: {
rows: [{
name: "Test",
thingy: 4,
resources: [{
title: "Title",
price: 5000
}]
}]
},
components: {
rowEditor: {
template: '#row-editor-t',
props: ['row'],
data() {
return {
editing: false,
localRow: null
};
},
methods: {
startEditing() {
this.editing = true;
this.localRow = JSON.parse(JSON.stringify(this.row));
},
stopEditing() {
this.editing = false;
},
update() {
this.$emit('update:row', this.localRow);
this.stopEditing();
},
cancel() {
this.stopEditing();
}
}
}
}
});<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="row, index in rows" is="row-editor" :row.sync="rows[index]">
</li>
</ul>
</div>
<template id="row-editor-t">
<li>
<div v-if="editing">
<input v-model="localRow.name">
<div v-for="resource in localRow.resources">
<input v-model="resource.title"><input v-model="resource.price">
</div>
</div>
<div v-else>
{{row.name}}
<div v-for="resource in row.resources">
{{resource.title}}: {{resource.price}}
</div>
</div>
<div v-if="editing">
<button type="button" @click="update">Update</button>
<button type="button" @click="cancel">Cancel</button>
</div>
<button v-else @click="startEditing">Start edit</button>
</li>
</template>
<!--
ul
li(v-for=" row in rows ")
p(v-if="!row.editing ") {{ row.name }}
input(v-else, v-model="mutableRow.name ")
resources(:row="row ")
button(v-if="!row.editing ") Start edit
template(v-else)
button Update
button Cancel
-->本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句