• vue数组操作不更新视图问题


    vue 观察数组的变异方法 更新视图

    push()

    pop()

    shift()

    unshift()

    splice(i,n,arr)

    sort(xx)

    reverse()

    ex: app.book.push({

      name:'css',

      author:'lee'

    })

    有些方法不会改变数组

    filter()

    concat()

    slice()

    返回新数组  需要用 新返回的数组 更新原数组

    app.books= app.books.filter(functiion(item){

         return item.name.match(/javascript/)

    })

    vue 不能检测到数组变化 不能触发视图更新:

    1 通过直接搜影 更改变量 

        ex app.book[3] = 'xxxx';

    2 修改数组的长度

      app.books.length =1;

    解决这个问题 俩种方法

    1 vue 内置的set方法 类 splice

      Vue.set(app.books,3,{

        name:'qqq',

        author:'qjb'

      })

    2 webpack 没有引入Vue 用 $set

     this.$set(app.books,3,{

      name:'css',

      author:'qjb'

    })

    this指向组建的实例 既 app ,可以使用app.$set()

    3  使用 splice

     appp.book.splice(3,1,{

      name:'css',

      author:'qjb'

    })

    splice(索引,删除的数量(0不删除),插入的变量arr1,arr2,arr3)

    更改索引

     app.books.splice(1);

    、、、、过滤与排序。。。。。。。

    不改变原数组 

     computed:{

      filterBooks:function(){

        return this.books.filter(function(book){

          return book.name.match(/javascript/)

        })

      }

    }

    sort()来排序

    、、、、、、、、、、、、、、、、、、、、、、

  • 相关阅读:
    Labeling Balls
    Following Orders
    Frame Stacking
    Window Pains
    Sort it all out
    Ferry Loading||
    今年暑假不AC
    xcode10 出现 框架 或者 pod 出错
    网络请求 步骤
    swift UIAlertController使用 UIAlertController的宽度 为270
  • 原文地址:https://www.cnblogs.com/dabingqi/p/9180628.html
Copyright © 2020-2023  润新知