vue 在使用数组的时候,数组内部数据发生变化,视图却没有改变
data(){
return{
todos: [
{name: 'aa', age: 22},
{name: 'bb', age: 23}
]
}
} methods:{
changeTodos(){
this.todos[0]={name: 'zz', age: 12}
}
}
上面我们在改变todos中的数据的时候,页面则没有改变,我们可以使用下面的方法来解决这个问题
1.使用全局set方法
this.$set(this.todos, 0, {name: 'zz', age: 12})
或
this.$set(this.todos[0], 'name', 'zz')
2.强制更新
this.$forceUpdate()
如果我们不想利用$set去设置,可以利用$forceUpdate,因为修改了数据但是页面层没有变动,说明数据本身被修改了,只是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下
changeTodos(){
this.todos[0]={name: 'zz', age: 12}
this.$forceUpdate();
}
监听vue中数组的变化,
如果只是监听数组列表项的增减即数组长度的改变,直接对数组进行监听就好了
watch:{
data(newVal, oldVal) {
// do
}
}
如果是要对数组列表项的内容是否发生改变做监听,则需要加上一个deep: true属性
watch: {
data: {
handler(newVal, oldVal) {
// do
},
deep: true
}
}
这个属性时深度监听,可以监听到对象,数组的内容变化
vue 在使用数组的时候,数组内部数据发生变化,视图却没有改变的更多相关文章
- 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理
前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- JavaScript的作用;JS常见的三种对话框;==和===的区别;函数内部参数数组arguments在函数内部打印实参;JS的误区:没有块级作用域
JS:客户端(浏览器)脚本语言 弱类型 基于原型 事件驱动 不需要编译(直接运行) JS的作用:表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 (一)常见的对 ...
- vue中过滤器比较两个数组取相同值
在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...
- Vue 数组中更新属性值后,视图不更新,等待其他元素更新后会触发的解决办法
因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. t ...
- VUE小练习(按钮颜色,数组映射)
VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
- 《深入浅出vue.js》阅读笔记之数组变化侦测
1.如何追踪变化 数组的侦测方式和对象不同,比如: this.list.push(1) 此时并不会像改变对象一样触发setter. 同理,要侦测数组的变化意味着我们在改变数组的时候得到通知,如图,我们 ...
- 数组去重及数组的prototype原型
Array.prototype.check= function(){ for(var i=0;i<this.length;i++){ for(var j=i+1;j<this.length ...
- PHP数组操作——获取数组最后一个值的方法
php开发过程中,可能经常需要对取出的数组要获取数组的最后健或值.在这里总结了三个方法,并且跟据他们三个方法在一些情况下如何使用的条件限制进行了说明. <?php $array=array(1, ...
随机推荐
- 数据结构进阶:ST表
简介 ST 表是用于解决 可重复贡献问题 的数据结构. 什么是可重复贡献问题? 可重复贡献问题 是指对于运算 \(\operatorname{opt}\) ,满足 \(x\operatorname ...
- 总结笔记 | 深度学习之Pytorch入门教程
笔记作者:王博Kings 目录 一.整体学习的建议 1.1 如何成为Pytorch大神? 1.2 如何读Github代码? 1.3 代码能力太弱怎么办? 二.Pytorch与TensorFlow概述 ...
- 微信小程序通过二维码获取参数运行
小程序开发过程中会遇到参数id会通过二维码获取,然后执行接口获取数据,但是难免会遇到带过来的参数出现乱码,这样就需要解码,多个参数时就需要进行处理取我们需要的字段值:小程序开发过程中会遇到参数id会通 ...
- Solon 的 PathVariable 不需注解
相对于 Spring boot 的 path variable :Solon 的不需注解,只要变量名对上即可: //path var demo // @XMapping("e/{p_q}/{ ...
- Vulnhub篇Photographerr
0x00 靶机信息 靶机:Photographerr:1 难度:中 下载:https://www.vulnhub.com/entry/photographer-1,519/ 0x01 信息收集 靶场网 ...
- 离线人脸识别门禁考勤——Android设备端APK及源码免费下载
适用场景:门禁场景的应用,适合安装在Android系统的门口机.闸机头.Pad等设备上. 主要功能:人员注册.人脸识别开门.考勤打卡.门禁权限管理.识别记录查询等. 预览效果: PC端 设备端1 设备 ...
- 高吞吐量消息系统—kafka
现在基本上大数据的场景中都会有kafka的身影,那么为什么这些场景下要用kafka而不用其他传统的消息队列呢?例如rabbitmq.主要的原因是因为kafka天然的百万级TPS,以及它对接其他大数据组 ...
- python设计模式之模板模式
python设计模式之模板模式 编写优秀代码的一个要素是避免冗余.在面向对象编程中,方法和函数是我们用来避免编写冗余代码的重要工具. 现实中,我们没法始终写出100%通用的代码.许多算法都有一些(但并 ...
- 微信小程序携带参数跳转页面/获取页面栈
页面跳转携带参数(以传递两个参数为例) a.wxml 页面传递 1 <navigator url="/pages/b/b?id=1&sid='289'"> &l ...
- Golang Gtk+3教程:开始
GTK+是一个控件工具包.每个通过GTK+创建的用户界面由一些控件组成. 控件是层级式的,window控件是主容器,通过在window中添加按钮.下拉菜单.输入字段等其他控件构成用户界面. 如果是复杂 ...