vue中修改数组,dom未更新的问题
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未更新的问题的更多相关文章
- vue中的虚拟DOM树
什么是虚拟DOM树?(Virtual DOM) 虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的 01 当页面渲染的时候Vue会创建一颗虚拟DOM树 02 ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- Vue方法中修改数组某一项元素而不能响应式更新
<template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...
- vue中修改了数据但视图无法更新的情况
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- 关于vue中tamplate和DOM节点浅谈
前言:在开发前段页面使用vue时,我们能经常看到template标签.这里粗略讲下自己对vue中template理解和使用. 1. 先了解vue vue.js是一个轻巧.高性能.壳组件画的MVVM库. ...
- 详解Vue中的虚拟DOM
摘要: 什么是虚拟DOM? 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并 ...
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- java或者jsp中修复会话标识未更新漏洞
AppScan会扫描“登录行为”前后的Cookie,其中会对其中的JSESSIONOID(或者别的cookie id依应用而定)进行记录.在登录行为发生后,如果cookie中这个值没有发生变化,则判定 ...
随机推荐
- nginx安装(windows下)及配置
1. 正向代理和反向代理 正向代理是一个位于客户端[用户A]和原始服务器[服务器B]之间的服务器[代理服务器Z],为了从原始服务器取得内容,用户A向代理服务器Z发送一个请求并指定目标(服务器B),然后 ...
- <JavaScript>如何阅读《JavaScript高级程序设计》(一)
题外话 最近在看<JavaScript高级程序设计>这本书,面对着700多页的厚书籍,心里有点压力,所以我决定梳理一下..探究一下到底怎么读这本书.本书的内容好像只有到ES5...所以只能 ...
- ASP.NET的IIS映射
ASP.NET默认扩展名为.aspx,可是我们看到许多网站的扩展名很特别,比如校内的do.个性之余还可以实现简单的伪静态(即把后缀改为html) 不过相对URLRewriter来说,是有点简陋(只能改 ...
- plantuml语法
活动图(新语法) 当前活动图(activity diagram)的语法有诸多限制和缺点,比如代码难以维护. 所以从V7947开始提出一种全新的.更好的语法格式和软件实现供用户使用(beta版). 就像 ...
- delphi循环校验数据集
function XXXXXFrom.CheckData(Sender: TObject): Boolean; var tmpcds:TfwClientDataset; begin Result:=F ...
- Linux命令集锦:tmux命令
tmux是一款优秀的终端复用软件,平时用到的强大功能有下面两个: 窗口管理:同时启用多个窗口: 保护现场:连接到远程主机之后,一旦断开,那么当前账户登录的任务就被取消了,但是使用 tmux 可以在断开 ...
- Go项目实战:打造高并发日志采集系统(二)
日志统计系统的整体思路就是监控各个文件夹下的日志,实时获取日志写入内容并写入kafka队列,写入kafka队列可以在高并发时排队,而且达到了逻辑解耦合的目的.然后从kafka队列中读出数据,根据实际需 ...
- Code First EF 多对多时拆分两个一对多
(*)多对多中还可以为中间表建立一个实体方式映射.当然如果中间关系表还想有其他字段,则要必须为中间表建立实体类(中间表和两个表之间就是两个一对多的关系了). demo项目 WebApp22 GitHu ...
- C# AES的128位、192位、256位加密
C# AES的128位.192位.256位加密 AES加密原理,这里就不解释了,自行百度.这里主要细说AES的CBC加密模式下的128位.192位.256位加密区别,参考 对称加密和分组加密中的四 ...
- Mac 配置flutter
1. vim ~/.base_profile 2. 如下 export PATH=/Users/korea/Desktop/development/flutter/bin:$PATH export P ...