美文网首页
vue的数据更新视图不同步的处理

vue的数据更新视图不同步的处理

作者: Hsugar | 来源:发表于2019-07-26 16:24 被阅读0次
  • 在el-table中渲染完接口返回数据
    很多情况需要我们对表格一些数据进行修改操作,比如修改价格,然后给表格每一列更新数据
    vm.items[indexOfItem] = newValue
    会发现数据变化了,但是页面视图并没有更新。因为这时候vue并没有检测到数组的变化。
  1. vue包装了数个数组操作函数,使用这些方法其数据变动时会被vue监测:
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
  2. vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
    filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
    vue 不能检测以下变动的数组:
    ① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
    ② 当你修改数组的长度时,例如: vm.items.length = newLength

如我在项目中的实例:


confirmEditAll(){
    let that = this;
    this.editList.map(d=>{
      // d.editPrice = this.editAllPrice    直接修改不会被vue监听
      that.$set(d,'editPrice',this.editAllPrice)    //vue会检测到
      return d;
    })
    console.log('editList',this.editList)
},

相关文章

  • vue的数据更新视图不同步的处理

    在el-table中渲染完接口返回数据很多情况需要我们对表格一些数据进行修改操作,比如修改价格,然后给表格每一列更...

  • Vue.$nextTick用法

    vue是数据驱动视图更新,但vue数据变化后,视图不会立即更新,而是异步的过程.具体的更新时机参考主队列,异步队列...

  • Vue的响应式原理和双向数据绑定

    Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新 Vue2.x是借助Object.definePr...

  • Vue中使用$set来添加数据并更新视图的方法

    vue中添加data数据的时候视图是不更新的,vue提供了一种$set的方法来强制修改数据并更新视图的方法: co...

  • vue 双向绑定原理实现

    实现 mvvm 主要包含两个方面,数据变化更新视图,视图变化更新数据 Vue 数据双向绑定(即数据响应式),是利用...

  • 记录简单实现Vue2中的响应式原理

    Vue是数据驱动视图模式,数据变更后,会自动更新视图。 原生js中要更新视图通常是通过触发事件,然后修改数据,最后...

  • 小程序实现双向绑定

    我们知道vue是双向绑定的前端框架,视图数据的更新,data就会更新;data更新,视图就会更新;这种双向绑定在小...

  • Vue.$nextTick()的使用

    Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。Vue.$...

  • vue2.0中$nextTick的作用

    1:Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。Vue...

  • vue 强制更新&第开销的静态组件 -17

    在vue中数据和视图层是是响应式更新的当数据发生变化的时候视图会跟着变化如果视图没有跟着数据变化一定是发生了vue...

网友评论

      本文标题:vue的数据更新视图不同步的处理

      本文链接:https://www.haomeiwen.com/subject/jkjdrctx.html