H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue 中数据层级太多,到时数据改变时没有及时将其渲染到页面上

简单来说是用vue的原方法:$set

this.$set(‘你的复杂数组’,’所需改变的数组的index’,’复杂数组所对应所需改变的index改变后的值’)

如下所示代码,我的复杂数组为commanlist,this.commandlist[index].originjs又作为一个数组,放在页面中进行新的渲染,并且其增删改需要联动页面展示。
js代码处的方法中,按照常规的this.commanlist[index].originjs.push(newitem)之后,虽然commandlist有发生改变,但是页面渲染并没有发生变化。
用$set赋值之后,就可以顺利联动了。

如果input框没法输入值,则在对应的input框上添加监听事件事件,强制更新,详见代码

如果小伙伴们有更简单的方法,评论回复我哈,谢谢~

template:

<div class="command-link-uri" v-if="item.kind=='link'">
                  JS源: <i class="add el-icon-circle-plus-outline" title="添加js源" @click="addSingleUri(index)"></i>
                  <div class="per-origin-js clearfix" v-for="(itemjs,indexoriginjs) in item.originjs" :key="'index'+indexoriginjs">
                    <div class="uridelete"><i class="delete el-icon-remove-outline" title="删除该js源"></i></div>
                    <div class="urilink">
                      <el-input v-model="item.originjs[indexoriginjs]" @input="change($event)" placeholder="请输入js地址"></el-input>
                    </div>
                  </div>
                </div>

js:

addSingleUri(index){
      if(!(this.commandlist[index].originjs && this.commandlist[index].originjs.length)){
        this.commandlist[index].originjs=[]
      }
      this.commandlist[index].originjs.push("")
      var attritem=this.commandlist[index]
      // 对象层级太多导致数据改变后页面无法渲染
      this.$set(this.commandlist, index, attritem);
    },
change(e) {
      this.$forceUpdate();
    },

2020/07/24更新
今天看到vue官网针对set的说明,感觉能比较好的解释为什么层次太深无法渲染的问题
image.png

本文地址:H5W3 » 【前端技术】vue 中数据层级太多,到时数据改变时没有及时将其渲染到页面上

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址