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

vue中的数据层级太多,当数据发生变化时,没有及时渲染到页面

时间:2023-03-31 20:04:07 vue.js

简单来说,就是用了vue原有的方法:$setthis.$set('你的复杂数组','需要更改数组的索引','复杂数组对应的索引的更改值')如下代码所示,我的复杂数组是commandlist,this.commandlist[index].originjs也作为一个数组并放置在页面中进行新的渲染,其增删改查需要在链接页面显示。在js代码处的方法中,按照约定俗成的this.commanlist[index].originjs.push(newitem),虽然commandlist变了,但是页面渲染没有变。用$set赋值后,就可以顺利链接了。如果输入框无法输入值,则在对应的输入框上添加监听事件,强制更新。有关详细信息,请参阅代码。如果大家有更简单的方法,请在评论中回复我,谢谢~template:JS源码:

js:addSingleUri(index){if(!(this.commandlist[index].originjs&&this.commandlist[index].originjs.length)){this.commandlist[索引].originjs=[]}this.commandlist[index].originjs.push("")varattritem=this.commandlist[index]//objectlevels太多,数据变化后无法渲染页面this.$设置(这个。命令列表,索引,attritem);},change(e){this.$forceUpdate();},2020/07/24更新今天在vue官网上看到了set的描述,感觉更能说明为什么level太深无法渲染的问题