Vue数据改变视图不更新的问题
- Vue数据改变视图不更新的问题 推荐度:
- 相关推荐
Vue数据改变视图不更新的问题
首先说下在什么情况下会出现这种情况以及解决方案
在vue2中用数组下标修改值时或者新增对象Key值时 这样vue的devsrve函数是监听不到数据的变化的所以就会导致数据更新视图未更新
1.数组利用下标修改值 (错误示范)
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.arr[0] = "列表0" // !错误的 这样是不响应的}}})
解决方案:
① 可以利用this.$set()
参数一:目标数据
参数二:目标数据的下标或者key值
参数三:所赋予的值
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.$set(this.arr, 0, "列表0")}}})
② 可以利用vue对数组重写的splice方法
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.arr.splice(0, 1, "列表0")}}})
③ 重新声明一个变量深拷贝一下当前这个数组然后重新赋值即可
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {let newArr = JSON.parse(JSON.stringify(this.arr))newArr[0] = "列表0"this.arr = newArr}}})
2.对象新增key值时 (错误示范)
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.newObj.b="456" //!这样给对象新加key值得方式是不响应的}}})
解决方案
① 利用this.$set()
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.$set(this.newObj, "b", "456")}}})
② 重新声明一个变量深拷贝一下当前这个数组然后重新赋值即可
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {let copyObj = JSON.parse(JSON.stringify(this.newObj))copyObj.b = "456"this.newObj = copyObj}}})
③ 可以利用Object.assign()方法
new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.newObj = Object.assign({}, this.newObj, { b: "456" })}}})
最新文章
- 南宁市计算机技术专业学校,南宁电脑技术学校有哪些
- phpcms api接口开发
- window cmd 创建文本文件
- WinRAR 3.51 注册码
- Tensorflow框架初识
- echarts tooltip层级
- Platform Builder
- VMware虚拟机使用Ubuntu全屏问题
- c语言中 #include < > 和include “ “的区别
- dump文件,windbg
- LruCache源码浅析
- 电话银行
- SAP 启动物料帐后不可更改物料价格的处理方法
- 关于extern用法说明
- return返回值用法
- jmeter脚本录制入门详解
- YOLOv3算法
- MFCCList使用
- idea各种中文乱码问题
- 【C语言进阶】C语言实现通讯录