vue项目中,更改数组元素的值,视图没有实时更新?
问题背景:
export default {
data(){
showItems: [false, false, false, false]
},
methods: {
showItem(index) {
this.showItems[index] = true;
},
cancelItem(index) {
this.showItems[index] = false;
},
},
}
如上代码,定义了showItems数组之后,通过点击按钮触发showItem和cancelItem函数来更改数组元素的值,发现页面上使用showItems数组元素的值并没有刷新,审查元素(如下图)找到该值,继续触发事件并查看发现元素值没有随着事件的触发而改变
原因:
由于 JavaScript 的限制及Vue实现响应式数据的原理,Vue 不能检测数组和对象的变化,具体原因参考Vue官网,我并没有对此深入理解。
解决方法:
我列出了三个解决方法:
- this.$forceUpdate()
用法:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。参考Vue官网vm-forceUpdate
export default {
data(){
showItems: [false, false, false, false]
},
methods: {
showItem(index) {
this.showItems[index] = true;
this.$forceUpdate()
},
cancelItem(index) {
this.showItems[index] = false;
this.$forceUpdate()
},
},
}
- this.$set(object, propertyName, value)
用法:
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property,参考Vue官网Vue-set
export default {
data(){
showItems: [false, false, false, false]
},
methods: {
showItem(index) {
this.$set(this.showItems, index, true)
},
cancelItem(index) {
this.$set(this.showItems, index, false)
},
},
}
- .push()
用法:
所以使用Vue包裹过的方法可以触发数据双向绑定
export default {
data(){
showItems: [false, false, false, false]
},
methods: {
showItem(index) {
this.showItems[index] = true;
this.showItems.push();
},
cancelItem(index) {
this.showItems[index] = false;
this.showItems.push();
},
},
}
vue项目中,更改数组元素的值,视图没有实时更新?的更多相关文章
- dom元素的tabindex属性介绍及在vue项目中的应用
dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabin ...
- 输出有序数组的中两个元素差值为指定值diff的两个元素
题目: 输出有序数组的中两个元素差值为指定值diff的两个元素. 思路: 这与输出两个元素的和的值为一定值类似,需要两个指针,不同的是:指针不是一左一右,而是一前一后. 如果差值等于diff,则返回: ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- vue项目中使用bpmn-为节点添加颜色
内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- vue项目中使用bpmn-番外篇(留言问题总结)
前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...
- 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...
随机推荐
- Navigator.registerProtocolHandler All In One
Navigator.registerProtocolHandler All In One Web API custom protocol URL Schemes URL Protocols https ...
- Netty & websockets
Netty & websockets Netty is a non-blocking I/O client-server framework for the development of Ja ...
- how to delete the virtual dom that created in memory using js
how to delete the virtual dom that created in memory using js const virtualDomConvert = (filename = ...
- HTML5 Server-Sent Events
HTML5 Server-Sent Events SSE demo https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse htt ...
- react UI 框架对比
传送门 https://blog.csdn.net/qiqingjin/article/details/79219206 点击
- NGK DeFi Baccarat或将推动BGV成为下一个千倍币!
目前,已经接近2020年年末,但是DeFi的热潮还在持续.近日,DeFi市场传出一道重磅利好消息,便是NGK DeFi去中心化交易系统Baccarat即将上线.届时,将会引起整个区块链市场的又一次震动 ...
- 2020 NGK 全球启动大会于美国硅谷圆满落幕
据NCC报道美国西海岸时间11月25日,NGK全球启动大会在美国加利福尼亚北部的硅谷会展中心成功举办.本次大会吸引了来自世界各地的企业家.创业者.开发者,以及投资人达一万人次齐聚硅谷. NGK创始人. ...
- app启动速度怎么提升?
简介: APP 启动速度的重要性不言而喻.高德地图是一个有着上亿用户的超级 APP,本文从唤端技术.H5 启动页.下载速度.APP加载.线程调度和任务编排等方面,详解相关技术原理和实现方案,分享高德在 ...
- Python爬虫_豆瓣电视剧
1 import requests 2 import json 3 import csv 4 5 6 class DoubantvSpider: 7 def __init__(self): 8 # s ...
- js实现复制粘贴
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...