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

    
    
  • 相关阅读:
    BZOJ2223: [Coci 2009]PATULJCI
    BZOJ2157: 旅游
    HDU6368
    BZOJ2006: [NOI2010]超级钢琴
    BZOJ1969: [Ahoi2005]LANE 航线规划
    BZOJ1878: [SDOI2009]HH的项链
    BZOJ1798: [Ahoi2009]Seq 维护序列seq
    BZOJ1503: [NOI2004]郁闷的出纳员
    BZOJ1370: [Baltic2003]Gang团伙
    BZOJ1342: [Baltic2007]Sound静音问题
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/9670500.html
Copyright © 2011-2022 走看看