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

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

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

时间: 2024-10-04 08:24:11

vue数组操作不更新视图问题的相关文章

vue数组对象修改触发视图更新

直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array.length = 2; 触发视图更新的方法有如下几种 1. Vue.set 可以设置对象或数组的值,通过key或数组索引,可以触发视图更新 数组修改 Vue.set(array, indexOfItem, newValue) this.array.$set(indexOfItem, newValue

关于Vue数组操作

Vue的数组操作的实现代码大致如下: const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; const arrayAugmentations = []; aryMethods.forEach((method)=> { // 这里是原生Array的原型方法 let original = Array.prototype[method]; // 将push, pop等封装好的方法定义在对

Vue数组操作不刷新视图问题的解决

最近使用Vue2.0开发项目,有一个列表使用v-for绑定到数组,按照Vue的推荐方案,使用push.splice.this.$set三个变异方法操作数组.发现在添加页面,三个方法都能及时刷新视图:但是在修改页面,只有this.$set方法修改数组元素能刷新,其他两个方法死活不刷新视图,使用Vue-devtools查看,数据都能成功修改. 尝试了在mount阶段就用push方法一个个添加,尝试把用到的对象都显示定义字段属性,尝试百度到的N种方法...花了四五个小时,都不行!但问题肯定是出在没有触

vue 数组操作

1 <template> 2 <div> 3 <h3>所有注册用户</h3> 4 <ul> 5 <li v-for="(item,index) in list" v-bind:key="index"> 6 {{item}} 7 </li> 8 </ul> 9 10 <p>变异方法,改变原来的数组</p> 11 <button v-on:cli

vue 数组更新大概原理(仅供理解)

var a = [1,1,4] var arrayProto = Array.prototype; var arrayMethods = Object.create(arrayProto); Object.defineProperty(a, 'push', { value: function(){ var arguments$1 = arguments; // avoid leaking arguments: // http://jsperf.com/closure-with-arguments

PHP内核探索之变量(4) - 数组操作

上一节(PHP内核探索之变量(3)- hash table),我们已经知道,数组在PHP的底层实际上是HashTable(链接法解决冲突),本文将对最常用的函数系列-数组操作的相关函数做进一步的跟踪. 本文主要内容: PHP中提供的数组操作函数 数组操作函数的实现 结语参考文献 一.PHP中提供的数组操作函数 可以说,数组是PHP中使用最广泛的数据结构之一,正因如此,PHP为开发者提供了丰富的数组操作函数(参见http://cn2.php.net/manual/en/ref.array.php

vue 数组

今天项目中发现的一个问题: 在vue项目中输出一个数组,明明有俩个值:0,6,但是length为1 正常的是这样的 结果研究发现,是vue源码的问题,具体内容如下: 转载自:http://www.cnblogs.com/Darlietoothpaste/p/6682407.html Vue的数组操作的实现代码大致如下: 1 const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 2

可更新视图及其规则

1 前言 多表视图的定义:当视图的数据源只有一张数据表,则该视图为单表视图:当视图的数据源是多张数据表,则该视图为多表视图. 可更新视图的定义:在绝大多数人的概念中,视图是只读的,不允许修改.ORACLE 8i以上版本,单表视图如果没有设定With Read Only,则该视图是可以更新的,对视图的操作将直接写入的数据表中. 那么,如果视图的数据源是多张数据表,而多表视图如果实现可更新视图,则可以大大提高编码的效率. 2 多表可更新视图的应用范围 在程序实现过程中,我们往往会将诸如产品编号.计量

关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,