vue数组变化视图_vue对象数组数据变化，页面不渲染

data() { // data数据

return {

arr: [1,2,3],

obj:{

a: 1,

b: 2

}

};

// 数据更新数组视图不更新

this.arr[0] = 'OBKoro1';

this.arr.length = 1;

console.log(arr);// ['OBKoro1'];

// 数据更新对象视图不更新

this.obj.c = 'OBKoro1';

delete this.obj.a;

console.log(obj); // {b:2,c:'OBKoro1'}

由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。

解决方式:

this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组

this.$set(this.obj, "c", "OBKoro1"); // 改变对象

2.数组原生方法触发视图更新

vue可以监听到数组原生方法导致的数据数据变化

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

意思是使用这些方法不用我们再进行额外的操作，视图自动进行更新。

推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作

3.替换数组/对象

比方说:你想遍历这个数组/对象，对每个元素进行处理，然后触发视图更新。

标签：arr,vue,obj,数组,渲染,视图,更新,OBKoro1,页面

来源： https://www.cnblogs.com/monkeySoft/p/13037559.html

vue数组变化视图_vue对象数组数据变化，页面不渲染相关推荐

JS 将有规律的数组，转换成对象数组
在工作中经常会遇到解析数据的问题,今天需要用js实现,将一个含有一些有规律数据的数组,解析成对象数组. 比如: ['123','er','456', 'fr'] ==>[{id: '123', ...
java ajax json 解析json数组对象数组对象数组对象数组_ajax传递包含对象数组的json数据...
一个简单的demo.用户在前台页面表单输入数据表的信息,数据传递到后台,系统自动在后台创建数据库表(table)的功能. 作为简单demo,这里的表只有"表名","列名& ...
vue，js中json对象数组按对象属性排序（sort方法）根据英文首字母进行排序
for (let i = 0; i < this.tableData.length; i++) {const itemList = this.tableData[i] as any;const ...
php对象和数组的效率,PHP对象数组和一般数组区别
PHP中的foreach作为经常用到的函数,常常用来遍历数组,对于数组中的元素是值的情形(如一般常见型的数组),foreach只是将数组中的每份元素的值拷贝到each后面的变量,也就是对值本身的拷贝, ...
js ajax传对象数组参数,JS传递对象数组为参数给后端，后端获取
JS传递对象数组为参数给后端,后端获取. 前端JS代码: var conditons = []; var test1 = new Object(); test1.name="1"; ...
ts定义数组类型_TS定义对象数组
定义兼容性对象数组T 表示传入的类型,可以为number.string.boolean等传入什么label就是什么类型 interface labelValue { label: T; value: ...
js 去重某个键值数组对象_js数组去重（包括对象数组去重）
2019.08.02补: 对象数组建议直接循环然后使用工具库(lodash)的深比较,评论里也有指出,文章的方法有些取巧了生产环境不要这么玩~. 方法一:利用ES6的Array.from()/扩展运 ...
java对象类型数组赋值_java声明对象数组
java如何对象创建数组并初始化急夜影驱动编程小编今天和大家分享答案 /** * 功能:声明一个学生类 * @author qqliweng * 时间:2009-10-22 * 版本:V1.0 */ ...
java中对象数组如何构造_对象数组如何构造
定义一个对象数组时是如何调用构造函数和析构函数的 #include #include using namespace std; //对象数组的初始化请看该函数 class student { publ ...

vue数组变化视图_vue对象数组数据变化，页面不渲染

vue数组变化视图_vue对象数组数据变化，页面不渲染相关推荐

最新文章

热门文章