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 选择器部分整理
Oct 28 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
js在HTML的三种引用方式详解
Aug 29 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切割页面div内容的实现代码分享
2012/07/31 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
会计求职自荐信
2014/06/20 职场文书
食品安全主题班会
2015/08/13 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server