VueJs - DOM不更新的阵列突变

问题描述：

我在该模型中安装后，我对初始化成功AJAX一系列的模型VueJs - DOM不更新的阵列突变

var self = this; 
    $.getJSON("somejson.json", 
     function (data) { 
      var list = []; 
      list = data.list.map(function (item) { 
       return { id: item.id, text: item.text }; 
      }); 

      self.selectableItems = list; 
     });

我有一个点击方法上的每个这些项目它去掉了从selectableItems

 select: function (item) { 
      this.selectableItems.pop(item); 
     },

selectableItems项正确呈现最初，但是当我变异的阵列，所述DOM没有更新。尽管实际的数组正在被正确修改。

我通过计算属性返回selectableItems的计数来验证这一点。当物品被移除时，此计数被正确更新，但是DOM仍然显示物品。

我还注意到，当我在ajax中硬编码selectableItems的值时，一切都按预期工作！

self.selectableItems = [{ id: 1, text: "adsad"}];

我知道vue中数组变异的注意事项。但我觉得我错过了一些基本的东西，因为我刚开始探索Vue。有人能指出我错过了什么吗？

是否使用'Array.prototype.pop（）''为this.selectableItems.pop（项目）;'？什么是论点？ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/pop – choasia

啊蛮愚蠢的！我是如此探索vuejs概念，我忘记了array.pop（）的定义。不管怎么说，还是要谢谢你！。 –

答

Array.pop()从数组中删除最后一项，它不带任何参数。它只会删除你传递它的最后一个参数。

你的计算属性显示数组计数的原因是最后一项被删除，但不是你想要的项目。

改为使用Array.splice()。

通过指数的点击方法是这样的：

<ul> 
    <li v-for="(item, index) in selectableItems" @click="select(index)>{{item}}</li> 
</ul>

脚本

select: function (index) { 
     this.selectableItems.splice(index, 1); 
    },

VueJs - DOM不更新的阵列突变

相关推荐