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 相关文章推荐
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
动态为事件添加js代码示例
2009/02/15 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python的re模块使用方法详解
2019/07/26 Python
python str字符串转uuid实例
2020/03/03 Python
Python如何转换字符串大小写
2020/06/04 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
对孩子的寄语
2014/04/09 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
交通安全月活动总结
2015/05/08 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
《打电话》教学反思
2016/02/22 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python