说了是无情,写了更无情,你说你看了不点赞是不是更绝情?遇到这种神奇的BUG,也是大家无奈的神情。
来分析看代码:
- class="card-item input-item" :class="{ 'w-100': followRadio === '2' }"
- v-for="(item,index) in stageRounds " :key="item.name">
-
- <template v-if="!item.hidden">
- <el-input v-if="followRadio === '1'" class="w-100"
- v-model="item.name">el-input>
- <el-input v-else class="w-100 big-w" v-model="item.roundName"
- placeholder="请填写随访点名称">el-input>
- template>
外面的v-for循环的key使用了元素的name属性,而恰好我们的name动态双向绑定给了input,故而在
input输入变化时触发了外层的刷新导致每输入一个字符后input失去焦点,影响输入。
修改方案如下:将:key赋值一个不变的值!避免动态刷新此dom!
- class="card-item input-item" :class="{ 'w-100': followRadio === '2' }"
- v-for="(item,index) in stageRounds " :key="index">
-
- <template v-if="!item.hidden">
- <el-input v-if="followRadio === '1'" class="w-100"
- v-model="item.name">el-input>
- <el-input v-else class="w-100 big-w" v-model="item.roundName"
- placeholder="请填写随访点名称">el-input>
- template>