vue中$set的使用(结合在实际应用中遇到的坑)


Posted in Javascript onJuly 10, 2018

最近在开发过程中遇到一个问题。在节点上面写点击事件时,点击事件不执行。代码如下:

<!-- 操作 -->
    <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)
 })
}

至此就解决啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
js实现抽奖功能
Nov 24 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 #Javascript
vue超时计算的组件实例代码
Jul 09 #Javascript
微信小程序自定义底部弹出框
Nov 16 #Javascript
详解vue中组件参数
Jul 09 #Javascript
微信小程序实现手指触摸画板
Jul 09 #Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
You might like
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python线程池的实现实例
2013/11/18 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python heapq使用详解及实例代码
2017/01/25 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
详解python with 上下文管理器
2020/09/02 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
工作中个人的自我评价
2013/12/31 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
小学生倡议书范文
2014/05/13 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
招商银行收入证明
2015/06/17 职场文书
六一亲子活动感想
2015/08/07 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB