vue中$set的使用(结合在实际应用中遇到的坑)
最近在开发过程中遇到一个问题。在节点上面写点击事件时,点击事件不执行。代码如下:
<!-- 操作 --> <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) }) }
至此就解决啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue $set 给数据赋值的实例
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 业务介绍:模拟后台数据向DOM树上遍历数据,再向数据里添加状态属性,根据状态改变显示图片,默认nochecked.png,点击时改变状态.显示checked.png DOM树 <div class="cartContent" :class="{'bg' : status == 2}" v-for="(val,key) in imgListData" :id="key&q
-
深入理解vue中的$set
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri
-
从vue源码解析Vue.set()和this.$set()
前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.
-
vue中 this.$set的用法详解
当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click=&qu
-
vue.js中$set与数组更新方法
由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触
-
Vue.set() this.$set()引发的视图更新思考及注意事项
引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API: this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr
-
Vue中的$set的使用实例代码
Vue -$set 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.studen
-
vue短信验证性能优化如何写入localstorage中
平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了 为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去loca
-
Vue项目之ES6装饰器在项目实战中的应用
目录 前言 装饰模式(Decorator) ES6 装饰器 装饰器应用 Validate CatchError Confirmation 总结 参考 前言 在面向对象(OOP)的设计模式中,装饰器的应用非常多,比如在 Java 和 Python 中,都有非常多的应用.ES6 也新增了装饰器的功能,本文会介绍 ES6 的装饰器的概念.作用以及在 Vue + ElementUI 的项目实战中的应用. 装饰模式(Decorator) 装饰模式(Decorator Pattern)允许向一个现有的对象添
-
基于vue中的scoped坑点解说
今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件.通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的. 代码如下: //valChange.less(使用了嵌套规则) #valueSlide{ .bigSlider
-
vue 将多个过滤器封装到一个文件中的代码详解
在这里只简单探讨关于如何将vue过滤器封装到一个文件当中,当然可以封装多个不同类型的过滤器,然后可以在需要使用过滤器的文件当中进行复用,非常的方便. 1. 首先是文件结构,首先涉及到 filters.vue (引用过滤器的文件) 文件代码: <template> <div class="chart-container"> <ul> <li v-for="texts in text" >{{texts | MoneyFo
-
vue使用Vue.extend方法仿写个loading加载中效果实例
目录 需求描述 效果图 代码实现 第一步,新建loading组件 第二步,新建index.js文件 第三步,在main.js中引入之 第四步,命令式调用 Vue.extend方法的理解 总结 需求描述 本文我们使用vue的extend方法实现一个全屏loading加载效果 通过命令就可以让弹框开启或关闭,比如this.$showDialog()开启,this.$hideDialog()关闭 方法可以传参更改loading中的文字 也可以传参更改loading背景色 当然这里除了文字,背景色什么的
-
vue+freemarker中遇到的坑及解决
目录 vue+freemarker遇到的坑 在这个过程中遇到了几个坑 freemarker的一些坑问题 1.对空对象十分敏感 2.freemarker中的${}与js中的${}冲突 3.渲染数字时出现逗号分隔 4.拼接渲染 5.将对象或数组渲染进js vue+freemarker遇到的坑 java后端开发者做后台管理系统,用模版技术还是挺方便的,但是如果在页面上对数据进行修改,怎么办呢? 可以用jQuery选中各个dom节点的值,然后组装成后台接口中需要的Form,再用ajax请求后台,这种方式
-
vue如何把组件方法暴露到window对象中
目录 把组件方法暴露到window对象中 方法 1(简单,但不推荐) 方法 2(推荐,解决方法 1 的痛点) 将方法绑定到window对象下,给app端调用 把组件方法暴露到window对象中 方法 1(简单,但不推荐) mounted() { // 2. 在mounted阶段声明globalFn,来调用组件内的方法 window.globalFn = () => { this.getDetail() } }, methods: { // 1. 组件内有一个getDeta
-
vue中遇到的坑之变化检测问题(数组相关)
最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践.查文档的方式解决了,这里做一个总结. 例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.
-
Vue.js学习记录之在元素与template中使用v-if指令实例
本文主要给大家介绍的是关于Vue.js在元素与template中使用v-if指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>&
-
vue中$set的使用(结合在实际应用中遇到的坑)
最近在开发过程中遇到一个问题.在节点上面写点击事件时,点击事件不执行.代码如下: <!-- 操作 --> <el-table-column label="操作"> <template slot-scope="scope"> <span class="poi icon-hover f16 mr20" @click='scope.row.edit=!scope.row.edit'> <svg-ic
随机推荐
- 四种数据库随机获取10条数据的方法
- hibernate属性级别注解实例代码
- python通过pip更新所有已安装的包实现方法
- YII Framework教程之异常处理详解
- js每隔5分钟执行一次ajax请求的实现方法
- CORBA对象生命周期之实现和内存管理
- MySQL学习第五天 MySQL数据库基本操作
- javascript之AJAX框架使用说明
- javascript 验证日期的函数
- jQuery中closest()函数用法实例
- 20个非常棒的 jQuery 幻灯片插件和教程分享
- javascript实现点击后变换按钮显示文字的方法
- JS特效实现图片自动播放并可控的效果
- 窃取QQ中社会工程学的应用实例
- spoolsv.exe占用cpu 99%的完美解决方法
- PHP HTML代码串截取代码
- 如何利用python查找电脑文件
- 详解解决使用axios发送json后台接收不到的问题
- django 基于中间件实现限制ip频繁访问过程详解
- layui 对table中的数据进行转义的实例