怎么解决修改input文本时列表会刷新

Question

为什么我在修改input文本时列表会刷新，每输入一个字符列表就会刷新一次，要怎么解决这个问题

如图

部分的代码

 <transition-group tag="ul" name="dev">
    <li v-for="(item, index) in devList" mode="out-in" :key="item.name" class="devicesCMCList">
        <img :src="item.link"  class="devImg">
        <span class="devBox" v-if="!item.nameFlag">{{ item.name }}</span>
        <input type="text" v-else-if="item.nameFlag" class="devBox" @keyup.enter="setName(index)" v-model="item.name">
        <toggle class="devBox" :value="item.value" @change="changeVal"></toggle>
        <span class="devBox" v-if="!item.dateFlag">{{ item.date }}</span>
        <input type="text" v-else-if="item.dateFlag" class="devBox">
        <button class="devBtn" @click="devBtn(index)"> <i></i></button>
    </li>
</transition-group>

Answer 1

li 标签上绑定的 key 值是 item.name，你输入框里改了 item.name，当然会引起视图重新渲染，换个绑定的 key 值就好啦