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 相关文章推荐
js使用递归解析xml
Dec 12 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
PHP与javascript对多项选择的处理
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python正规则表达式学习指南
2016/08/02 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
工程业务员岗位职责
2013/12/31 职场文书
争论的故事教学反思
2014/02/06 职场文书
暑期培训心得体会
2014/09/02 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
个人先进事迹材料
2014/12/29 职场文书
刘胡兰观后感
2015/06/16 职场文书