由于 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. 上传图片JS插件Plupload

    Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...

  2. 【repost】 原生JS执行环境与作用域深入理解

    首先,我们要知道执行环境和作用域是两个完全不同的概念. 函数的每次调用都有与之紧密相关的作用域和执行环境.从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象 ...

  3. 我看Windows 8.1

    在大家惊叹于Windows 8的大胆创新之时,Windows 8.1却已然来到.在公布了Preview之后,笔者便迫不及待地进行了安装,并在这里简单的说说最直观的感受. 提到Windows 8,不得不 ...

  4. mac上配置php开发环境

    玉忠之前在我的mac上配置过,当时项目不能区分大小写,所以就没成功,我现在在他得基础上继续配置,希望成功. 教程:http://my.oschina.net/joanfen/blog/171109 以 ...

  5. 解决UNIGUI字体太小的问题

    解决UNIGUI字体太小的问题 Unigui运行在chrome浏览器下可以有最佳的效果,但用ie打开用unigui做的项目会发现字体明显小一截,可以用自定义css来解决这个问题. 可以在UniServ ...

  6. C#基础复习(4) 之 浅析List、Dictionary

    参考资料 [1] .netCore 源码 https://github.com/dotnet/corefx [2] <Unity 3D脚本编程 使用C#语言开发跨平台游戏>陈嘉栋著 [3] ...

  7. C#复数类的总结

    复数是C#中没有的,不能直接调用的.但是我们可以通过封装,构造自己的复数形式.这里我自己封装了一个Complex类,也不知道写得如何.可能还有一些东西没有考虑. 不过这里包含了复数的基本晕算了了,包括 ...

  8. Entity Framework 6 多对多增改操作指南

    问题描述 在很多系统中,存在多对多关系的维护.如下图: 这种多对多结构在数据库中大部分有三个数据表,其中两个主表,还有一个关联表,关联表至少两个字段,即左表主键.右表主键. 如上图,其中的Suppli ...

  9. AngularJs创建自定义Service

    AngularJs可以创建自定义的service.下面的自定义service实现一个double倍数的服务: 参考下面语法: app.service('double', function () { t ...

  10. 使用Python请求http/https时设置失败重试次数

    设置请求时的重试规则 import requests from requests.adapters import HTTPAdapter s = requests.Session() a = HTTP ...