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中这个值没有发生变化,则判定 ...
随机推荐
- 浅谈WebViewClient与WebChromeClient
简介:WebViewClient被用来传递单纯的加载一个链接时所发生的事件,比如开始加载,结束加载等,它代表这个链接加载时的最普通的和最笼统的事件,WebChromeClient更多的是传递JS对话框 ...
- 深度学习之加载VGG19模型获取特征图
1.加载VGG19获取图片特征图 # coding = utf-8 import tensorflow as tf import numpy as np import matplotlib.pyplo ...
- RabbitMQ学习之:(四)回头看刚才写的程序 (转贴+我的评论)
转自:http://lostechies.com/derekgreer/2012/03/18/rabbitmq-for-windows-hello-world-review/ 我的心得: 1. 在创建 ...
- sublime的简单配置(解决为什么package control无效)
1:下载sublime text 3 要到它的官网下载,要英文的. 2:安装sublime的包. 进入sublime按快捷键ctrl+~(~是键盘左上角Esc下面的键). 3:在这里面输入如下代码.( ...
- RxJS 6有哪些新变化?
我们的前端工程由Angular4升级到Angular6,rxjs也要升级到rxjs6. rxjs6的语法做了很大的改动,幸亏引入了rxjs-compact包,否则升级工作会无法按时完成. 按照官方的 ...
- 用mongodump以及mongorestore来完成mongo的迁移任务
首先粘贴官网说明: 详细请见:https://docs.mongodb.com/manual/ 在实际操作中,一般只需用到 mongodump -h ip:port -d dbName -o path ...
- UNITY3D 添加预制的方法
预制文件(Prefabs)的做法 我这里需要的图片 在hierarchy 视图下新建一个2D object->sprite 然后设置这个sprite的背景为需要的图片 新建一个prefabs目录 ...
- SpringBoot: 6.文件上传(转)
1.编写页面uploadFile.html <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Python 线程----线程方法,线程事件,线程队列,线程池,GIL锁,协程,Greenlet
主要内容: 线程的一些其他方法 线程事件 线程队列 线程池 GIL锁 协程 Greenlet Gevent 一. 线程(threading)的一些其他方法 from threading import ...
- docker容器内存和CPU使用限制
docker容器内存和CPU使用限制 示例如下 sudo docker run --name seckill0 -p 8080:8080 -m 1024M --cpus=0.2 -d seckill: ...