zoukankan      html  css  js  c++  java
  • vue数据绑定数组,改变元素时不更新view问题

    关于这个问题,官网上说的很清楚官方文档 

    写个例子
    HTML
    <body>
    <div class="box">
    <div v-for="aa in aas">{{aa}}</div>
    <button @click="change">变数据 </button>
    </div>
    </body>


    js
    var vm = new Vue({
    el:".box",
    data:{
    aas:["ss","ddd","fff","bbb"]
    },
    methods:{
          change(){
          // 点击按钮时,改变aas的最后一个元素,
          // 数据变了 但是view没有更新
          this.aas[3] = 444;
        }
      }
    })


    为什么
    因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view;解决方案就是,需要我们主动通知vue;

     

    解决方案1
    methods:{
        change(){
        this.aas[3] = 444;
        // 在vm实例上通知
        vm.$set(this.aas,3,444)
      }
    }
    解决方案2
    methods:{
        change(){
        this.aas[3] = 444;
        // 在全局对象上通知
        Vue.set(this.aas,3,444)
      }
    }
    解决方案3
    methods:{
      change(){
        // vue本身可以监听到数组的一些方法,例如:
        // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
        this.aas.splice(3,1,"444");
      }
    }

    
    
  • 相关阅读:
    Pandas怎样按条件删除行?
    分享一个百度大牛的Python视频系列下载
    Python的几个高级编程技巧
    Pandas系列-读取csv/txt/excel/mysql数据
    判断质数
    mac命令行光标操作快捷键
    私有Docker部署GitLab重置管理员密码
    noip2012借教室
    乘法逆元
    noip2008T2 火柴棒等式
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/9670500.html
Copyright © 2011-2022 走看看