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中这个值没有发生变化,则判定 ...
随机推荐
- Spring数据分析思维课
本文目录 一.杂 二.四大行业数据分析 1.工具 1.电商数据分析——以京东为例 2.sql常见问题 2.互联网金融——以芝麻信用为例 3.数据异常排查 3.游戏行业——以欢乐斗地主为例 4.融入 ...
- Nginx优化之日志优化,URL访问控制,防盗链,及站点文件目录优化
Nginx日志相关优化与安全 日志切割脚本如下: #!/bin #日志切割脚本 Date=`date +%Y%m%d` Bdir="/usr/local/nginx" Nginxl ...
- JS原生代码之倒计时抢购
学到了原声js改变input的disabled的属性值,因为想让倒计时结束的同时,抢购按钮可以被点击.代码为:document.getElementById("buy").disa ...
- 九十五:CMS系统之cms后台模板渲染
定义一个宏,用于渲染static文件的时候,只需要传文件名就可以,上下两个“-”是解决渲染的时候源代码换行的情况 {% macro static(filename) -%} {{ url_for('s ...
- JavaScript(4)——CSS选择的艺术
CSS选择的艺术 常用常见的选择器: 类选择器[ .class ],id选择器[ #id ],全局选择器[ * ],元素选择器[ element ] 根据层次关系定位: (1) element, el ...
- iclass 鎖機鎖程序破解限制方法-適合于有用google login 的App
此法適合于有用google login 的App,只需要去到 app login 界面, 找到 “log in with google” , 然後向下滾動,找到最下面的 “説明” ,點擊進去,就會見到 ...
- Leetcode刷题6—不同路径
一.要求 二.知识点 这道题属于动态规划,主要思路就是将大问题不断分解成小问题进行求解 三.解题思路 1.利用数学思路找规律 将m和n组合成一个m*n的矩阵,而且是一个对称阵 [[0],[1],[1] ...
- [机器学习理论] 降维算法PCA、SVD(部分内容,有待更新)
几个概念 正交矩阵 在矩阵论中,正交矩阵(orthogonal matrix)是一个方块矩阵,其元素为实数,而且行向量与列向量皆为正交的单位向量,使得该矩阵的转置矩阵为其逆矩阵: 其中,为单位矩阵. ...
- Spark Streaming的实时词频和累加词频统计
(注:运行环境是Ubuntu16, pycharm) 1. 按时段统计:获取scoket端口传输的数据(英文数据即可,方便分词),统计各个时间段内每个单词出现的次数(每个时间段都分别统计,需要使用的关 ...
- activeMQ(2)
queue与topic的对比 JMS MESSAGE:消息头 消息体 消息属性 DeliveryMode: 消息体: 消息属性:识别 去重 重点标注 //创建会话session 事务.签收 如果 ...