由于 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. 自己写一个chrome扩展程序 - 右键菜单扩展

    最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...

  2. 开源HIS之C/S选型

    客户端/服务的形式是我中爱的,我认可只有这样软件跑起来不会失控.因为你不知道每一个程序员是否足够清醒.但一开始我说过要从基本的应急的门诊收费开始,所以我并不打算一启动就写一个服务,并为之选型:TCP/ ...

  3. Libre Office冻结操作-MAC

    冻结行/列 选中所要冻结的行/列,选择window-Freeze 冻结成功 冻结单元格 操作方法与“冻结行/列”一致

  4. 分频器的verilog设计

    笔者最近由于实验室老师的任务安排重新又看了一下分频器的verilog实现,现总结如下,待以后查看之用(重点是查看计数器计到哪个值clk_out进行状态翻转) 1.偶数分频占空比为50% 其实质还是一个 ...

  5. [mysql]当mysql查询语句查询的结果为空时,返回query结果是什么类型的呢?

    php > $con = mysql_connect('localhost' , 'hnb' , 'alyHnb2015'); php > print_r($con);Resource i ...

  6. 11.CrawlSpiders

    CrawlSpiders 通过下面的命令可以快速创建 CrawlSpider模板 的代码: .scrapy startproject tencentspider .scrapy genspider - ...

  7. C# .NET 获取枚举值的自定义属性

    一.定义一个类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  8. HttpClient的帮助类

    /// <summary> /// http请求类 /// </summary> public class HttpHelper { private HttpClient _h ...

  9. 新建WebAPI项目时遇到的问题

    1   处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler” 以管理员运行下面的命令注册 ...

  10. centos下配置nginx遇到的一些基本的坑

    作为一个用.net的渣渣,常年混迹在window平台下,对Linux啥都不懂.随着.net core开源.跨平台后,也开始学习下linux. 在Desktop/Webs下放了一个index.html的 ...