zoukankan      html  css  js  c++  java
  • 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新。

    这个情况一般分为两种,

    一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新

    第二种情况是改变了对象的某一项,但是其他依赖这个数据的视图没更新

    第一种情况是因为直接通过索引去改变数组,vue 对象监听不到他的变化 所以没有更新。

    ----解决方法  1. Vue.set(example1.items[0], { childMsg: 'Changed!'})

          2.使用Vue的变异方法 pop() push() shift() unshift() revese() sort() splice() 也会触发视图更新

    第二种情况是修改对象的属性,比如父组件和子组件公用一份数据,数据通过props传到子组件,在子组件中修改数据父组件中不会响应。

    方案一:利用Vue.set(object,key,val)

    例:Vue.set(vm.obj,'k1','v1')

    方案二:利用this.$set(this.obj,key,val)

    例:this.$set(this.obj,'k1','v1')

    方案三:利用Object.assign({},this.obj)创建新对象

    方案四:可以先删除掉该项,然后再使用set 去添加

  • 相关阅读:
    Can't connect to local MySQL server through socket '/tmp/mysql.sock'
    reversePairs
    sort
    分割数组的最小值
    decode string
    276. 栅栏涂色
    133. Clone Graph
    Palindromic string
    爬楼梯
    正则匹配
  • 原文地址:https://www.cnblogs.com/buxiugangzi/p/12050165.html
Copyright © 2011-2022 走看看