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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
Convert Seconds To Hours
Jun 16 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
Javascript实现信息滚动效果
May 18 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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
星际流派综述
2020/03/04 星际争霸
对Session和Cookie的区分与解释
2007/03/16 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
AngularJS ng-mousedown 指令
2016/08/02 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
TensorFlow实现Softmax回归模型
2018/03/09 Python
如何基于Python创建目录文件夹
2019/12/31 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
暑假学习心得体会
2014/09/02 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
考研英语辞职信
2015/05/13 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
聘任书格式及范文
2015/09/21 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL