vue,for循环中的缓存问题
我在for循环中引入了一个组件,组件的内容就是input。根据input中输入的值在input下方展示对应计算后的值。但是我发现点击删除某一项后,这一项中input下方计算后的值会被展示在下一项中。经
涉及到项目,只能放这样的代码:
<ul class="cl__list-ul cl__table" v-if="item.itemList.length">
<li class="cl__table-line" v-for="(spu, spIndex) in item.itemList" :key="spIndex">
<div class="cl__table-td td--m" v-show="!spu.skuSelectedNum">
<comb-entry :info="spu" :tbIndex="spIndex" :type="item.uniqueId" :minLimit="Number(spu.minPrice)" :mealOriginPrice="spu.priceStr" @blur="onHandleBlurPrice"></comb-entry>
</div>
</li>
</ul>
代码中 comb-entry 就是有input的子组件。可以看到这是一个列表。假如说有三项。我先输入第二项的input内容,这时候在第二项的input下方就会展示计算后的值。然后删除第二项。这时候原来的第三项就是第二项了。但是第三项没有输入下面也会展示计算后的值,而且值就是原来第二项的内容
我是不知道你组件内部的实现,不过我觉得你的问题和li的key的关系相当的大,你使用的是v-for产生的index,所以删除第二项之后,第三项就会使用第二项的key,然后可能是嵌套较深它就傻了,认为key一样就不更新了,具体行为我是不太清楚
你需要维护一个不重复的key
还有我是不知道你这个vue的版本,反正vue3就不用给key了