vue不能检测到数组的变动

在写vue的项目时,遇到一个问题,正常的情况下model层变化,view层跟着变化。但是 现在我model层变化更新了,view层没有变化(好紧张,难道我又遇上了传说中的Bug),我想哭……,好在方法总比困难多,蹂躏一番度娘后,度娘终于给了我想要的。开始分享

Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,vue没有办法直接监听

this.dataArr[0] = {
  "text": "东北", 
   "value": "db"
};

因此,如果我们直接对数组元素赋值,结果往往是悲剧的……,Vue无法更新View。这是vue的盲区,在这个地方我们需要给vue配副眼镜……,怎么配呢?

this.dataArr[0].text = '东北';
this.dataArr[0].value= 'db';

清空数组的时候this.dataArr = []; 这种方法也不行,必须使用_this.dataArr.slice(0,_this.dataArr.length);

所以在这里给大家总结了vue可以监听到的方法,用这些方法去操作数组,vue就可以监听到了。splice() push() unshife() 用这三个方法操作model可以更新view。

想更新层次的了解vue为什么能够监听model状态的变化,可以去了解一下JavaScript的Proxy或者Object.observe()机制

end

猜你喜欢

转载自blog.csdn.net/weixin_36934930/article/details/79917693
今日推荐