实战经验分享:Vue中的$set使用及其常见问题解析
最编程
2024-08-07 12:12:22
...
最近在开发过程中遇到一个问题。在节点上面写点击事件时,点击事件不执行。代码如下:
<!-- 操作 --> <el-table-column label="操作"> <template slot-scope="scope"> <span class="poi icon-hover f16 mr20" @click='scope.row.edit=!scope.row.edit'> <svg-icon :icon-class="scope.row.edit?'icon_edit_outline':'icon_save'"></svg-icon> </span> <span class="poi icon-hover f16"> <svg-icon icon-class="icon_delete"></svg-icon> </span> </template> </el-table-column> <!-- 操作 -->
这里面的click事件一直不执行,一开始以为是点击事件没写对一直在找原因,后面突然想到会不会是数据不同步的原因的,因为edit字段是自己添加进去的字段,如下:
export default { name: 'strategic', data() { return { tableData: [{ 'pp_id': 4, 'brand_name': '1414', 'project_name': '得意', 'description': '的u会回来会', 'publish_time': '2018-07-23', 'is_used': 0 }] } }, components: { }, computed: { }, created() { this.initTableData() }, methods: { initTableData() { this.tableData.forEach(element => { element.edit = false }) } } }
之后我直接在数据里面加上edit字段,发现是能够同步数据的,代码如下:
data() { return { tableData: [{ 'pp_id': 4, 'brand_name': '1414', 'project_name': '1414', 'description': '7588888888', 'publish_time': '2018-07-23', 'is_used': 0, 'edit': false }] } }
原来是在我们使用vue进行开发,当生成vue示例后,再次给数据赋值时,有时候并不能自动更新到数据上去,这时候我们就要通过$set来解决这个问题,解决代码如下:
initTableData() { this.tableData.forEach(element => { this.$set(element, 'edit', false) }) }
至此就解决啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 在Vue中添加HTML代码的技巧
下一篇: Mxgraph实战分享:经验与技巧汇总
推荐阅读
-
实战经验分享:Vue中的$set使用及其常见问题解析
-
【2022新手指南】Java编程进阶之路 - 六、技术架构篇 ### MySQL索引底层解析与优化实战 - 你会讲解MySQL索引的数据结构吗?性能调优技巧知多少? - Redis深度揭秘:你知道多少?从基础到哨兵、主从复制全梳理 - Redis持久化及哨兵模式详解,还有集群搭建和Leader选举黑箱打开 - Zookeeper是个啥?特性和应用场景大公开 - ZooKeeper集群搭建攻略及 Leader选举、读写一致性、共享锁实现细节 - 探究ZooKeeper中的Leader选举机制及其在分布式环境中的作用 - Zab协议深入剖析:原理、功能与在Zookeeper中的核心地位 - RabbitMQ全方位解读:工作模式、消费限流、可靠投递与配置策略 - 设计者视角:RabbitMQ过期时间、死信队列与延时队列实践指南 - RocketMQ特性和应用场景揭示:理解其精髓与差异化优势 - Kafka详细介绍:特性及广泛应用于实时数据处理的场景解析 - ElasticSearch实力揭秘:特性概述与作为搜索引擎的广泛应用 - MongoDB认知升级:非关系型数据库的优势阐述,安装与使用实战教学 - BIO/NIO/AIO网络模型对比:掌握它们的区别与在网络编程中的实际应用 - Netty带你飞:理解其超快速度背后的秘密,包括线程模型分析 - 网络通信黑科技:Netty编解码原理与常用编解码器的应用,Protostuff实战演示 - 解密Netty粘包与拆包现象,怎样有效应对这一常见问题 - 自定义Netty心跳检测机制,轻松调整检测间隔时间的艺术 - Dubbo轻骑兵介绍:核心特性概览,服务降级实战与其实现益处 - Dubbo三大神器解读:本地存根与本地伪装的实战运用与优势呈现 ----------------------- 七、结语与回顾
-
Vue2.x中eventBus的使用及其常见问题解析