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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
js继承的实现代码
Aug 05 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python语法分析之字符串格式化
2019/06/13 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
yy司仪主持词
2014/03/22 职场文书
岗位聘任书范文
2014/03/29 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
MySQL索引是啥?不懂就问
2021/07/21 MySQL