由于 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. 解决mac安装homebrew后报错-bash: brew: command not found

    解决mac安装homebrew后报错-bash: brew: command not found     参照官网上很简单的一句安装命令, /usr/bin/ruby -e "$(curl ...

  2. mysql查询 根据年月日的查询

    select * from call_loan_info where DATE_FORMAT(create_time,'%Y-%m-%d') = '2017-06-16'

  3. hdu 4939 三色塔防

    http://acm.hdu.edu.cn/showproblem.php?pid=4939 给出一条长为n个单位长度的直线,每通过一个单位长度需要 t 秒. 有3种塔,红塔可以在当前格子每秒造成 x ...

  4. VS2008 安装WINCE插件报错 ToolsMsmCA(Error)解决方案___VS2008

    在win7系统,VS2008环境下安装EFMS9280_SDK.msi文件出现报错 ToolsMsmCA(Error):IHxFilters filter registration failure: ...

  5. 8.正则表达式和XPath

    1.使用正则表达式爬取内涵段子 import requests import re def loadPage(page): url = "http://www.neihan8.com/art ...

  6. DevExpress的TcxDBLookupComboBox使用方法及问题

    使用TcxDBLookupComboBox需要设置以下属性: 1.DataBinding.DataSource:数据感知控件的数据源. 2.DataBinding.DataField:数据感知控件的连 ...

  7. 完美融合 nextjs 和 antd

    相信大家在使用nextjs的时候,难免遇到一些坑.其实可能大部分原因在于 nextjs 做了很多封装,我们可能不能第一时间搞清楚包括它相关的所有配置,比如其中的webpack配置.我前面也写过 SSR ...

  8. postgresql 主从 patroni

    1 安装基础包 1.1 postgres yum install https://download.postgresql.org/pub/repos/yum/10/redhat/rhel-7-x86_ ...

  9. 你所不知道的ASP.NET Core MVC/WebApi基础系列 (一)

    转自博客:https://www.cnblogs.com/CreateMyself/p/9235968.html 前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时 ...

  10. 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组

    [源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件 ...