VueJS2:更新数据模式？
因此，在我的一个VueJS模板中，我有一个左边栏，它通过迭代(v-for)多维items数组来生成按钮。
当单击其中一个按钮时，将运行一个方法：
this.active.notes = item.notes
active.notes绑定到右侧内容部分中的文本区域。
因此，每次单击其中一个项目按钮时，您都会看到与该项目关联的(活动)备注。
我希望能够让用户编辑文本区域中的活动注释。我在textarea blur上有一个AJAX调用，它会更新数据库。但问题是，items数据并没有改变。因此，如果我单击不同的项目，然后单击返回到已编辑的项目，我会看到预先编辑的备注。当然，当我刷新页面时，一切都会完美地排列在一起。
更新项目数据的最好方法是什么，使其始终与文本区域编辑保持一致？我是否应该以某种方式重新加载项目数据(通过另一个对数据库的AJAX调用)？或者，有没有更好的方法将模型绑定在一起？
下面是JS：
export default {
mounted () {
this.loadItems();
},
data() {
return {
items: [],
active: {
notes: ''
},
}
},
methods: {
loadItems() {
axios.get('/api/items/'+this.id)
.then(resp => {
this.items = resp.data
})
},
saveNotes () {
...api call to save in db...
},
updateActive (item) {
this.active.notes = item.notes;
},
}
}
回答 3
Stack Overflow用户
发布于 2017-03-03 01:46:32
我在您的数据对象中找不到items属性。
为了让Vue转换属性并使其成为响应式，数据对象中必须存在属性
Vue不允许向已经创建的实例动态添加新的根级反应属性
也许你可以看看这个：
Stack Overflow用户
发布于 2017-03-03 16:01:30
似乎this.items并不存在于您的结构中，除非有什么东西没有显示出来。如果它不存在，则将其设置为一个空数组，该数组将在ajax调用中填充：
data() {
return {
active: {
notes: ''
},
items: [],
},现在，当ajax方法运行时，空数组items将通过下面这一行填充您的resp.data：(this.items= resp.data)。然后，您应该能够使用v-for遍历items数组，并且您的updateActive方法应该可以按照您的预期工作。
Stack Overflow用户
发布于 2018-05-23 22:07:53
https://stackoverflow.com/questions/42566135
复制
腾讯云开发者
