vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新?

比如有一个数组对象:

obj = [{'name': 'joy'},{'name': 'bowen'}]

我要循坏插入某个属性,或者修改某个属性的值:

for (let i=0; i<obj.length; i++) {
  obj[i].year = '20'
}
发现数组可以修改成功,但是dom元素不会更新,这是为什么呢?

原因:vue监听对象的变化,但是无法监听对象自身属性的改变,所以无法更新dom,除非我们更新这个数组:

this.$set( target , key , value )

强制渲染页面

target:要更改的数据源(可以是对象或者数组);

key:要更改的具体数据;

value:重新赋的值;

希望本文对你有所帮助!

vue中修改数组,dom未更新的问题的更多相关文章

  1. vue中的虚拟DOM树

    什么是虚拟DOM树?(Virtual DOM)   虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的    01    当页面渲染的时候Vue会创建一颗虚拟DOM树 02    ...

  2. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  3. Vue方法中修改数组某一项元素而不能响应式更新

    <template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...

  4. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  5. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  6. 关于vue中tamplate和DOM节点浅谈

    前言:在开发前段页面使用vue时,我们能经常看到template标签.这里粗略讲下自己对vue中template理解和使用. 1. 先了解vue vue.js是一个轻巧.高性能.壳组件画的MVVM库. ...

  7. 详解Vue中的虚拟DOM

    摘要: 什么是虚拟DOM? 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并 ...

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

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

  9. java或者jsp中修复会话标识未更新漏洞

    AppScan会扫描“登录行为”前后的Cookie,其中会对其中的JSESSIONOID(或者别的cookie id依应用而定)进行记录.在登录行为发生后,如果cookie中这个值没有发生变化,则判定 ...

随机推荐

  1. react数据渲染

    现在需要在页面上显示一本书的章节,章节内容存放到一个数组里面: const lessons = [ { title: 'Lesson 1: title', description: 'Lesson 1 ...

  2. MySQL:行锁、表锁、乐观锁、悲观锁、读锁、写锁

    1.锁的分类 1.1从对数据操作的类型来分 读锁(共享锁):针对同一份数据,多个读操作可以同时进行而不会互相影响. 结论1: --如果某一个会话 对A表加了read锁,则 该会话 可以对A表进行读操作 ...

  3. MYSQL通过循环向数据库中插入数据

    BEGINdeclare i int default 305;declare a char(255);REPEATset a=concat("测试机构00",cast(i as c ...

  4. HttpURLConnection获取数据

    使用步骤: 1.创建Url 2.用Url打开连接 3.设置请求参数 4. 获取响应状态码 2xxx 请求成功 3xxx重定向 4xxx资源错误 5xxx服务器错误 5.获取服务器返回的二进制输入流 6 ...

  5. Git入门之在IDEA中使用Git上传maven项目

    下载安装git客户端: 参考博文:https://www.cnblogs.com/java-maowei/p/5950930.html 在IDEA怎么使用git上传spring的maven项目详解: ...

  6. Highcharts的常用属性及导出SVG

    做了好几个项目都用到了Highcharts,好用自然不用多说,这里总结一下每次作图经常用的一些配置,方便以后查看. 引入Highcharts非常简单,只需引入对应的js,页面中写入存放表格的div,j ...

  7. redis 超时失效key 的监听触发使用

    redis自2.8.0之后版本提供Keyspace Notifications功能,允许客户订阅Pub / Sub频道,以便以某种方式接收影响Redis数据集的事件. 可能收到的事件的例子如下: 所有 ...

  8. Linux (Ubuntu)上面安装maven

    1 首先检查linux上是否有maven mvn -v 或者mvn -version 如果没有安装,提示如下: ubuntu@ip----:~$ mvn -v The program 'mvn' ca ...

  9. .net 开源 FTP 组件 edtFTPnet

    edtFTPnet官方网站:http://www.enterprisedt.com/products/edtftpnet/ 目前最新版本为2.2.3,下载后在bin目录中找到edtFTPnet.dll ...

  10. Kafka如何保证百万级写入速度以及保证不丢失不重复消费

    一.如何保证百万级写入速度: 目录 1.页缓存技术 + 磁盘顺序写 2.零拷贝技术 3.最后的总结 “这篇文章来聊一下Kafka的一些架构设计原理,这也是互联网公司面试时非常高频的技术考点. Kafk ...