由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

  • 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时,例如: vm.items.length = newLength

方法一:如官方文档所示

  

用法:完成赋值之后,使用上面的那些方法即可,比如:

this.checkedMenu[0]=5;//赋值操作
this.checkedMenu.sort();//使用变异方法

方法二:使用Vue.Set

//Vue.set(实例数组,要修改元素的下标,新值)
//假如data中有一个数组arr
data(){
return{
arr:[1,2]
}
} //将数组中下标为0的值修改成3
Vue.set(this.arr,0,3)

vue数组检测更新问题的更多相关文章

  1. Vue 数组中更新属性值后,视图不更新,等待其他元素更新后会触发的解决办法

    因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. t ...

  2. vue中数组变动更新检测

    Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push() pop() shift() unshift( ...

  3. Vue不能检测数组或对象变动问题的解决

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  5. vue 数组push元素 视图没更新

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...

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

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  7. vue 不能检测数组长度 值变化原因解析

    1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...

  8. Vue不能检测的数组变化 对象变化

    数组: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时 ...

  9. vue数组更新界面无变化

    1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...

随机推荐

  1. multiprocessing、threading、gevent区别

    1. 进程是资源分配的单位 2. 线程是操作系统调度的单位 3. 进程切换需要的资源很最大,效率很低 4. 线程切换需要的资源一般,效率一般(当然了在不考虑GIL的情况下) 5. 协程切换任务资源很小 ...

  2. BUG 图片元素img下 高度超出 出现多余空白

    BUG 图片元素img下 高度超出 出现多余空白 1.将图片转换为块级对象 即,设置img为“display:block;”.   2.设置图片的垂直对齐方式 即设置图片的vertical-align ...

  3. Linux 下socket通信终极指南(附TCP、UDP完整代码)

    linux下用socket通信,有TCP.UDP两种协议,网上的很多教程把两个混在了一起,或者只讲其中一种.现在我把自己这两天研究的成果汇总下来,写了一个完整的,适合初学者参考,也方便自己以后查阅. ...

  4. tarjan算法--求解无向图的割点和桥

    1.桥:是存在于无向图中的这样的一条边,如果去掉这一条边,那么整张无向图会分为两部分,这样的一条边称为桥 也就是说 无向连通图中,如果删除某边后,图变成不连通,则称该边为桥 2.割点:无向连通图中,如 ...

  5. AngularJS $watch 性能杀手

    双向绑定是AngularJS核心概念之一,它给我们带来了思维的转变,不再是以DOM为驱动,而是以Model为核心,View中写上声明式标签(指令或{{}}),AngularJS会在后台默默同步View ...

  6. logrotate 日志切割工具

    相关原理参见:https://www.cnblogs.com/sailrancho/p/4784763.html 一.相关目录: 程序:/usr/sbin/logrotate配置:/etc/logro ...

  7. 动态规划--求最大连续子数组的和(Python实现)&求解最大连续乘积字串(Python实现)

    def MaxSum(self,array,n): sum=array[0] result=array[0] for i in range(0,n): if sum<0: sum=a[i] el ...

  8. 1.mysql安装

    Navicat账号:root 密码:weihu 账号:weihu 密码:weihu 1.首先进入的是安装引导界面 2.然后进入的是类型选择界面,这里有3个类型:Typical(典型).Complete ...

  9. ios调用系统界面显示英文

    调用系统相册界面 UIImagePickerController *picker = [[UIImagePickerController alloc] init]; picker.sourceType ...

  10. What makes for effective detection proposals? 论文解析

    1 介绍(INTRODUCTION) 本文主要对最近的 proposal 检测方法做一个总结和评价.主要是下面这些方法.  2 Detection Proposal 方法(DETECTION PROP ...