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 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
新闻分类录入、显示系统
2006/10/09 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
nodejs下打包模块archiver详解
2014/12/03 NodeJs
JavaScript学习笔记之定时器
2015/01/22 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
跟老齐学Python之Python文档
2014/10/10 Python
Python CSV模块使用实例
2015/04/09 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
给儿子的表扬信
2014/01/15 职场文书
运输服务质量承诺书
2014/03/27 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
教师求职自荐信
2015/03/26 职场文书
公司财务人员岗位职责
2015/04/14 职场文书