vue.js数据在清除后未更新
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js数据在清除后未更新相关的知识，希望对你有一定的参考价值。
我的页面中有一个vue.js项目，用于跟踪对表单所做的更改。它看起来像这样：
var changes_applied = [];
var changes_applied_block = new Vue({
name: "ChangesApplied",
el: '#changes-applied',
data: {
items: changes_applied
},
methods: {
remove: function(index) {
changes_applied.splice(index, 1);
}
}
});
当检测到更改时，更改将被推送到changes_applied数组，并按预期显示在“更改已应用”div中。删除也有效，它只调用vue对象上的remove方法。
我还有一个“清除”按钮，它没有连接到vue实例，当它被点击时，它使用changes_applied = [];将数据源设置回一个空数组
问题是在使用按钮清除之后，更改数组的更改/添加不再显示在vue元素中 - 就像vue元素不再附加到changes_applied数组一样。
我是否缺少一个需要发生的绑定或其他东西，或者是否有一种“vue方式”来清除vue数据而不触及实际的源数组？
Mark_M已经提供了一个很好的解释，我将添加一个演示，因为我认为它更容易理解它是如何工作的。
您可以将数组的值复制到数据，但是必须直接对数据执行所有操作：
const changes_applied = [
{id: 1},
{id: 2},
{id: 3}
];
const vm = new Vue({
el: '#app',
data: {items: changes_applied},
methods: {
add() {
const id = this.items.length + 1
this.items.push({id})
},
remove() {
this.items.pop()
},
clear() {
this.items = []
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<div>
<button type="button" @click="add">Add</button>
<button type="button" @click="remove">Remove</button>
<button type="button" @click="clear">Clear</button>
</div>
<ul name="list">
<li v-for="item in items" :key="item.id">
Item {{ item.id }}
</li>
</ul>
</div>你不应该改变changes_applied阵列; Vue并没有真正对该阵列的变化做出反应。当this.items指向同一个数组引用时，它只有一些工作。当您通过重新分配changes_applied来更改该引用时，它会中断，因为您正在操作changes_applied但它不再是与this.items相同的数组。
你应该直接操纵this.items：
methods: {
remove: function(index) {
this.items.splice(index, 1);
}
要清除它，您可以设置：
this.items = []
它将按预期工作。
您的items数组使用changes_applied进行初始化，但不会绑定绑定，它只是创建实例时项目的默认值。因此，如果更改changes_applied，则不会影响vue实例上的items数组。
例
new Vue({
el: '#app',
data: function () {
return {
items: myArr,
newItem: ''
}
},
methods: {
addItem () {
this.items.push(this.newItem)
this.newItem = ''
},
remove (index) {
this.items.splice(index, 1)
},
clear () {
this.items = []
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<input type="text" v-model="newItem" />
<button @click="addItem">Add</button>
<button @click="clear">Clear</button>
<p v-for="(item, index) in items" @click="remove(index)">{{item}}</p>
</div>
<!-- from outside vue instance-->
<button onClick="clearFromOutside()">clear from outside</button>
<script>
var myArr = ['hola', 'mundo'];
function clearFromOutside() {
console.log(myArr)
myArr = [];
console.log(myArr)
}
</script>以上是关于vue.js数据在清除后未更新的主要内容，如果未能解决你的问题，请参考以下文章
替换片段后未调用 OnDestroyView 和 OnResume