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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js数组操作常用方法
May 08 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
javascript执行环境及作用域详解
May 05 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
webpack4.x打包过程详解
Jul 18 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
晶体管来复再生式二管收音机
2021/03/02 无线电
mysql 搜索之简单应用
2007/04/27 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
快速了解python leveldb
2018/01/18 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Django框架模板介绍
2019/01/15 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python3实现高效的端口扫描
2019/08/31 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
银行员工辞职信范文
2014/01/20 职场文书
效能风暴心得体会
2014/09/04 职场文书
2014年政教处工作总结
2014/12/20 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
治庸问责工作总结
2015/08/11 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python