在工作中遇到N次input无法输入的问题，感觉是因为层级嵌套太深导致。以下是问题代码

<li 
   v-for="(item,index) in currentAgg.queries" 
   :key="index" 
   @click="onBackground(index)"
   class="aggreLi"
>
   <div style="width:51%;border:1px solid #ccc;">
      <input
           type="text"
           v-model="item.name"
          disabled="disabled"
           placeholder="点位名称"
           style="width:56%;"
       />
       <em></em>
       <input
            type="text"
            placeholder="数据所属分类"
            v-model="item.aggregation1"
            style="width:20%;"
            @input="getEvent($event)"
            />
      </div>
      <div><i class="add" @click.stop="onAdd('DTA')"></i></div>
      <div><i class="delted" @click.stop="onDeleteAgg(index)"></i></div>
 </li>

我做了个测试在输入的时候input的@input事件都不会去触发。但是经过测试，就这种写法在其他地方是没什么问题的。后来通过监听currentAgg.queries发现在切换的时候数组会变化，同样会调用添加数组的逻辑，但是每次数组长度都是1。既然watch监听会变化，那么数组长度就会变化，可是没有数组清空或者增加的那部分监听数据，意味着我们在什么地方改变了数组，后来发现在调用添加数组方法的时候，调用了清空数组的方法，而且是异步调用，同是操作的数组。
一下是调用的代码

 if (!this.currentAgg.bindings.data) {
     this.clearCurrAgg();
     this.onPush();
  }

清空数组的方法

clearCurrAgg() {
      return this.currentAgg = {
        elementId: "",
        attrName: "",
        queries: [],
        type: "",
        bindings: {},
        refreshIntervals: 3
      };
    },

添加数组的方法

 onPush() {
      let obj = {
        id: "",
        name: "",
        // aggregation1: "avg",//聚合
        aggregation1: "",//聚合
        fillpolicy1: "none",  //聚合补值
        aggregation2: "avg",//降频
        fillpolicy2: "none",//降频补值
        isDownSample: false,//是否降频
        downSample: "1m",
        endTimer: "",
        startTime: "",
        disabled: false,
        compute: "",
        timephased: "size",//时间分段
        sizephased: "size",//数量分段
        xValues: "",//时间分段的值
        yValues: "",//数量分段的值
        sizeAgg: "count"//数值分段的聚合（步长）
      };
      this.currentAgg.queries.push(obj);
    },

更改后的调用方式

if (!this.currentAgg.bindings.data) {
   this.clearCurrAgg().then(() => {
       this.onPush();
   });
}

更改后的清空数据组方法，使用promise，确保在清空完数组后再添加数组.这个时候就没问题啦。

clearCurrAgg() {
      return new Promise((resolve, reject) => {
        resolve(
            this.currentAgg = {
              elementId: "",
              attrName: "",
              queries: [],
              type: "",
              bindings: {},
              refreshIntervals: 3
            }
        );
        reject();
      })
    },

开始的时候一直怀疑是因为循环的是对象下的数组导致的问题，但是经过在其他地方实验，调试，都没有复现类似的问题。出现输入不进去的情况往往是因为dom存在，而v-model绑定的数据还没有创建的时候才会出现，所以我决定监听一下数组，突然间发现，好家伙切换的时候应该是清空数组，watch居然没反馈结果，只给了一个新的长度为1的数组，空数组直接略过了。。。。

决定给自己养一个良好的习惯，遇到问题记录一下，方便以后查阅。