在工作中遇到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的数组，空数组直接略过了。。。。
决定给自己养一个良好的习惯，遇到问题记录一下，方便以后查阅。
