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

在 Json 数据中更新后未显示 ListView

导航回上一个选项卡后未显示数据

FragmentStatePagerAdapter视图分页器片段在重新创建活动后未显示

更改语言环境后未调用 onConfigurationChange