当前位置: 首页 > Web前端 > vue.js

vue修改属性值后页面不重新渲染

时间:2023-03-31 15:27:40 vue.js

vue修改属性值后不重新渲染页面如果不起作用,您可以使用this.$forceUpdate()方法。最近多次修改对象的属性后,页面没有重新渲染。场景如下:HTML页面如下:

{{item.name}}
编辑

js部分如下:绑定类是添加红色边框,如下:.redBorder{border:1pxsolid#f00;}在项目中点击按钮后,不会出现红色边框和提示错误框。打开调试器查看,发现这里运行后并没有执行,tableData中的值也没有变化。这个方法用过去的时候会起作用。可能是这个项目的复杂性导致的,具体原因未知。找到数据后修改为使用$set设置修改后的值。js如下:this.$set(this.tableData[id],"red",true);但它仍然不起作用。打开调试器,发现tableData的值修改成功了,但是页面上没有渲染,而且查到的信息比较乱,无法解决问题。请教高手,才知道是数据层太多,没有触发render函数自动更新。需要手动调用。调用方法如下:this.$forceUpdate();js完整代码如下:如有问题请指教。