关于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();
    },