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

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

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

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

// 与 example1.items[0] = ... 相同,但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})

或者使用vue变异方法:

vue 直接改变数组数据不刷新的更多相关文章

  1. vue中改变数组的值视图无变化

    今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...

  2. vue 路由变化页面数据不刷新问题(缓存)

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. ...

  3. vue中改变数组或对象,页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

  4. VUE 路由变化页面数据不刷新问题

    出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致 ...

  5. vue改变了数据却没有自动刷新

    有两个按钮,按钮上有个number属性,当此值为偶数时,按钮显示为红色. 最初的数据如下:"a": [{ name: "one" },{ name: " ...

  6. vue对象数组数据变化,页面不渲染

    很多时候,我们习惯于这样操作数组和对象: data() { // data数据 return { arr: [1,2,3], obj:{ a: 1, b: 2 } }; }, // 数据更新 数组视图 ...

  7. vue v-for的数组改变导致页面不渲染解决方法

    直接在数组里,改变数组来达到重新渲染页面的目的, 需要用push等数组方法, 或者$set(),或者给数组重新赋值,来改变数组引用地址 而是直接索引= <body> <div id= ...

  8. Vue 改变数组中对象的属性不重新渲染View的解决方案

    Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...

  9. Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...

随机推荐

  1. 流媒体技术学习笔记之(三)Nginx-Rtmp-Module统计某频道在线观看流的客户数

    获得订阅者人数,可以方便地显示观看流的客户数. 查看已经安装好的模块 /usr/local/nginx/sbin/nginx -V 安装从源编译Nginx和Nginx-RTMP所需的工具 sudo a ...

  2. Brief History of Machine Learning

    Brief History of Machine Learning My subjective ML timeline Since the initial standpoint of science, ...

  3. js简单的面试题

    1,js有哪些数据类型,数据类型的判断函数? String,Number,Boolean,Null,Undefined,Object 判断函数有:typeof,instanceof,construct ...

  4. VS2017创建类库项目后添加不了WPF资源字典

    第一步: 先找到你需要添加的库类工程文件,位置如下: 第二步: 使用记事本文件打开,找到图片的位置,把三行代码粘贴进去,保存文件.重新打开项目: 三行代码如下: <ProjectTypeGuid ...

  5. SOAP简单示例

    看了网上的几个文章,SOAP的示例布局都不清晰,不能马上入手,特意写个例子与大家分享,同时记录备用. 当前环境:VS2013 + WPF private void Button_Click(objec ...

  6. linux如何查看端口被哪个进程占用?

    参考:https://jingyan.baidu.com/article/546ae1853947b71149f28cb7.html 1.lsof -i:端口号 2.netstat -tunlp|gr ...

  7. pwd、ln和重定向命令

    pwd命令 命令功能: ​ 使用pwd命令可以显示当前的工作目录,该命令很简单,直接输入pwd即可,后面不带参数. ​ pwd命令以绝对路径的方式显示用户当前工作目录.命令将当前目录的全路径名称(从根 ...

  8. Coursera台大机器学习技法课程笔记15-Matrix Factorization

    很多ML模型用的都是数值特征,那么对于分类特征,该怎么做呢? 以linear network为例:先对特征进行转换,转换成有意义的特征后,再对其进行线性组合 进一步,模型可表示为:使Ein最小,我们就 ...

  9. MongoDB 进阶模式设计

    原文链接:http://www.mongoing.com/mongodb-advanced-pattern-design 12月12日上午,TJ在开源中国的年终盛典会上分享了文档模型设计的进阶技巧,就 ...

  10. Java第三阶段学习(十四、JSP动态页面、EL表达式、JSTL标签库)

    一.JSP技术 1.jsp脚本和注释 jap脚本: 1)<%java代码%> ----- 内部的java代码翻译到service方法的内部,比如写在doget.dopost 内的代码 2) ...