码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-06-14 01:16:48      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:UNC   shift   pack   观察   item   ack   nbsp   slice   func   

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()来排序

 

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

 

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

标签:UNC   shift   pack   观察   item   ack   nbsp   slice   func   

原文地址:https://www.cnblogs.com/dabingqi/p/9180628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!