关于vue.js: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();    },