vue中的for循环数组数据时，修改了数组中的值页面不重新渲染for循环节点数据的问题

借鉴博客：https://www.cnblogs.com/songzxblog/p/12669029.html

解决办法，直接在修改数组后加上：亲测完全有效

this.$forceUpdate();

再操作完页面数据后加上这行代码，意思是强制刷新v-for的数据。可以解决v-for循环的值改变页面不刷新的问题。

之所以导致页面不刷新是由于在vue中根据下标改变数组内容时，或者改变数组长度时不会触发页面更新，只有push，splice 等操作数组时才会触发页面更新。

还有数组不更新问题：

　　如：数组替换其中一个元素，页面上却更新数据

this.item[1] = 'd';  //页面并不会响应式更新数据

最新找到以下几种方法也可以：

　　1、使用 splice方法，如：

let arr = [1, 2, 3];

arr.splice(0, 1, 4); //从下标0开始，下标为1的元素，替换成4

console.log(arr);  //打印：[4， 2， 3]

　　2、Vue.set()

this.set(this.item, indexOfItem, newValue)

或
this.$set(this.item, indexOfItem, newValue)


前端Study

相关

标签