Vue2数据更新视图不更新的解决方法
【vue中较为重要的一个知识点】如果说引用数据类型没定义该属性,属性改变的时候视图不更新该如何解决?
·
【vue中较为重要的一个知识点】
如果说引用数据类型没定义该属性,属性改变的时候视图不更新
该如何解决?主要有以下两种解决方法:
1. $set方法 (强制性更新视图)
语法:
this. $set (目标对象 / 数组, 属性 / 下标, 新值) ;
<template>
<div class="about">
<h1>{{ obj }}</h1>
<h1>{{ arr }}</h1>
<h1>{{ arr1 }}</h1>
<button @click="change">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {},
arr: [],
arr1: [{}, {}],
};
},
methods: {
change() {
this.$set(this.obj, "name", "张三");
this.$set(this.arr, 0, 1);
this.$set(this.arr1, 0, { name: "张三" });
this.$set(this.arr1[1], "name", "李四");
},
},
};
</script>
2. JSON.parse(JSON.stringify( ) )
<template>
<div class="about">
<h1>{{ obj }}</h1>
<h1>{{ arr }}</h1>
<h1>{{ arr1 }}</h1>
<button @click="change">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {},
arr: [],
arr1: [{}, {}],
};
},
methods: {
change() {
this.obj.name = "张三";
this.obj = JSON.parse(JSON.stringify(this.obj));
this.arr[0] = 1;
this.arr = JSON.parse(JSON.stringify(this.arr));
this.arr1[0] = { name: "张三" };
this.arr1 = JSON.parse(JSON.stringify(this.arr1));
},
},
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)