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. Android Dalvik、ART及APK编译过程

    0.1 先对Dalvik以及ART做简单介绍: 什么是Dalvik: Dalvik是Google公司自己设计用于Android平台的Java虚拟机.dex格式是专为Dalvik应用设计的一种压缩格式, ...

  2. Centos7下使用Ceph-deploy快速部署Ceph分布式存储-操作记录(转)

    之前已详细介绍了Ceph分布式存储基础知识,下面简单记录下Centos7使用Ceph-deploy快速部署Ceph环境:1)基本环境 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  3. Elasticsearch 空值过滤

    参考:https://blog.csdn.net/zhang862520682/article/details/80333196 参考:https://www.jianshu.com/p/7a5d70 ...

  4. hostname -i 出现0.0.0.0解决

    [root@hostnametest4 ~]# hostname -i 0.0.0.0 原因:是因为四个节点中其中一个节点没有配置hosts解析,必须每个节点写全这四个ip,只要掉一个ip就会出现0. ...

  5. 概率dp作业

    概率dp特征: 概率DP一般求的是实际结果,在DP过程中,当前状态是由所有子状态的概率共同转移而来,所以概率DP只是利用了DP的动态而没有规划(即只需转移无需决策).-------qkoqhh A - ...

  6. 在java中异常中的题目---重要的一点

    public classTest { public static void main(String[] args) { System.out.println(newTest().test()); } ...

  7. 【Flink】flink执行jar报错:java.io.IOException: Error opening the Input Split file 或者 java.io.FileNotFoundException

    报错内容 flink执行jar时,报如下错误: org.apache.flink.client.program.ProgramInvocationException: Job failed. (Job ...

  8. 【Linux】配置SSH免密登录

    环境说明 假设我们有三台机器分别为bigdata111,bigdata112,bigdata113,三台机器均为centos 7系统. 配置SSH免密登录 (1)利用Xshell的发送键输入到所有会话 ...

  9. ASP.NET Core 入门笔记10,ASP.NET Core 中间件(Middleware)入门

    一.前言 1.本教程主要内容 ASP.NET Core 中间件介绍 通过自定义 ASP.NET Core 中间件实现请求验签 2.本教程环境信息 软件/环境 说明 操作系统 Windows 10 SD ...

  10. Java学习笔记-网络编程

    Java提供了网络编程,并且在实际中有着大量运用 网络编程 网络编程概述 网络模型 OSI参考模型 TCP/IP参考模型 网络通讯要素 IP地址 端口号 传输协议 网络参考模型 网络通讯要素 IP地址 ...