关于vue.js:vue-中数据层级太多到时数据改变时没有及时将其渲染到页面上

226次阅读

共计 1152 个字符，预计需要花费 3 分钟才能阅读完成。

简略来说是用 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();
    },

正文完