因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化:

  1. 直接用索引设置元素,如 vm.items[0] = {};

  2. 修改数据的长度,如 vm.items.length = 0。

  3. this.examineIntro.questionList[0].selList[1].url = url;

为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:

// 与 example1.items[0] = ... 相同,但是能触发视图更新

Vue.set(example1.items[0], { childMsg: 'Changed!'})

使用Vue的变异方法

pop()

push()

shift()

unshift()

revese()

sort()

splice()

也会触发视图更新

之前不知道前面的方式的时候我就是用先push再 pop解决的

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

  1. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  2. js从一个对象数组中根据属性值大小排序

    <script type="text/javascript"> var sdts = [ {name:"小明",age:30}, {name:&qu ...

  3. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  4. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  5. Js数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面

    需求整理: 本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面. 数组如下所示: var arrayData= [{name: & ...

  6. ajax取到数据后如何拿到data.data中的属性值

    今天遇到的ajax取到数据后如何拿到data.data中的属性值的问题 比如拿到了数据 我要取出data中的name 题外话:当然取名最好别取什么奇怪的xiaobi

  7. vue监听数组中某个属性,计算其他属性问题

    今天在项目开发中遇到一个根据数组中某个属性变化同时更新另一个属性变化的问题,刚开始代码如下 this.weekList1=r.data.roomProducts; this.weekList1.map ...

  8. JavaScript去除数组中的重复值

    用原型函数(prototype)可以定义一些很方便的自定义函数,实现各种自定义功能. Javascript 中的原型函数(prototype)的工作原理,在 javascript 中每次声明新函数的过 ...

  9. JavaScript查找数组中最大的值

    // 查找一个数组中最大的数 // 定义一个方法 searchMax function searchMax(arr) { // 声明一个变量MaxNumber假设为数组中最大的值arr[0]; var ...

  10. PHP检测数组中的每个值是否含有特殊字符

    本文出至:新太潮流网络博客 /** * [TestArray 检测数组是一维还是二维] * @E-mial wuliqiang_aa@163.com * @TIME 2017-04-07 * @WEB ...

随机推荐

  1. div下拉框(待改善)

    不说话,直接上代码,其中函数dealchose()没有实现,各位就不必纠结了 <%@ page language="java" import="java.util. ...

  2. canvas图片压缩,局部放大,像素处理

    直接上代码:(具体看注释) 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head> ...

  3. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

  4. 美柚“姨妈假”上头条,App事件营销怎么做

        近期,微博上有关"姨妈假"的话题异常火爆,事件源于厦门互联网企业美柚所推出的一项"奇葩福利"------女员工可向公司请姨妈假.此事经媒体报道.微博爆料 ...

  5. Ubuntu安装vncserver实现图形化远程桌面

    安装 apt-get update apt-get install vnc4server 开启vnc服务 vncserver 首次启动会要求设置密码,后面可以使用vncpasswd修改: 看到 New ...

  6. ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解(持续更新) 第十六节:语法总结(3)(C#6.0和C#7.0新语法) 第三节:深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借

    ASP.NET MVC深入浅出系列(持续更新)   一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...

  7. 16:Merge

    题目描述 数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出. 输入描述:先输入键值对的个数,然后输入成对的index和value值 ...

  8. StringUtils方法

    org.apache.commons.lang.StringUtils中方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的( ...

  9. MySQL -- Ubuntu下的操作命令

    =======================安装======================参照MySQL官网的步骤:https://dev.mysql.com/doc/mysql-apt-repo ...

  10. php eval()计算

    php中的eval()函数可以处理php代码,因此可以用此来解决:以字符串格式存储的计算公式 比如: $str='2*(3+12)'; $s=eval("return $str;" ...