vue修改对象的属性值后页面不重新渲染的实例


Posted in Javascript onAugust 09, 2018

最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下:

HTML页面如下:

<template v-for="item in tableData">
    <div :class="{'redBorder':item.red}">
    <div>{{ item.name}}</div>
    <div>
     <el-button size="mini" @click="clickBtn(item.id)" type="info">编辑</el-button>
     <p class="el-icon-error" v-show="item.tip"></p>
    </div>
    </div>
</template>

js部分如下:

<script>
 export default {
  data() {
  return {
   tableData:[{id:0,name:"lili",red:false,tip:false}]
  }
  },
 
  methods: {
 clickBtn(id){
 this.tableData[id].red=true;
 this.tableData[id].tip=true; 
 }
 }
}
</script>

绑定的class是加一个红色的边框,如下:

.redBorder{
 border:1px solid #f00;
}

在项目中点击button后不出现红色边框和提示错误框,打开debugger查看,发现运行到了这里却没有执行,tableData中的值并没有改变,这个方法在以前使用时会起作用,可能是这次的项目比较复杂引起的,具体原因不明。

后通过查找资料修改为使用$set来设定修改值,js如下:

this.$set(this.tableData[id],"red",true);

但是依然没有起作用,打开debugger发现tableData的值修改成功,没有渲染到页面上,查找的资料也是比较凌乱,并不能解决问题,后请教大神,才知道是数据层次太多,没有触发render函数进行自动更新,需手动调用,调用方式如下:

this.$forceUpdate();

js完整代码如下:

<script>
 export default {
  data() {
  return {
   tableData:[{id:0,name:"lili",red:false,tip:false}]
  }
  },
 
  methods: {
 clickBtn(id){
 this.$forceUpdate();
 this.$set(this.tableData[id],"red",true);
 this.$set(this.tableData[id],"tip",true); 
 }}}
</script>

以上是我解决问题的全过程,有不对的地方请指教。

这篇vue修改对象的属性值后页面不重新渲染的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
js不常见操作运算符总结
Nov 20 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 #Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 #Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 #Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 #Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 #Javascript
You might like
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php 定义404页面的实现代码
2012/11/19 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
售前工程师职业生涯规划
2014/03/02 职场文书
学生手册评语
2014/05/05 职场文书
校园文明倡议书
2014/05/16 职场文书
医德考评自我评价
2014/09/14 职场文书
师德师风自查总结
2014/10/14 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2016十一国庆节感言
2015/12/09 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python