最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

Vue数据改变视图不更新的问题

IT培训 admin 1浏览 0评论

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" })}}})

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" })}}})

11136

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论