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

    
    
  • 相关阅读:
    Colidity-- NumberOfDiscIntersections
    Colidity--Triangle
    Colidity--CountDiv
    Colidity--MinAvgTwoSlice
    Colidity--GenomicRangeQuery
    Colidity--PassingCars
    操作系统--内存管理方式
    蓝桥杯练习系统—算法训练 P1102
    蓝桥杯练习系统—基础练习 完美的代价
    2n皇后问题
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/9670500.html
Copyright © 2011-2022 走看看