Vue 2.x 子组件删除时使用setTimeout导致splice数组元素后视图没有正确更新的解决方案

最新推荐文章于 2025-04-01 10:11:12 发布

元无心

最新推荐文章于 2025-04-01 10:11:12 发布

阅读量784

点赞数 1

分类专栏：前端杂谈有趣的bug 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/HermitSun/article/details/104450627

版权

在实际业务中，经常会有这样的场景：一堆消息卡片。比如：
在这里插入图片描述
对于这种情况，在Vue里，我们一般都会封装一个Card组件，然后在父组件中用v-for进行渲染。以下是一个随手写的例子（也可以在https://codesandbox.io/s/great-field-x95lw?fontsize=14&hidenavigation=1&theme=dark查看）：

// App.vue
<template>
  <div id="app">
    <div v-for="(item, index) in arr"
         :key="index">
      <Card :title="item.name"
            @remove="arr.splice(index, 1)"/>
    </div>  
  </div>
</template>

<script>
export default {
  name: 'App',
  components: { Card },
  data () {
    return {
      arr: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' },
        { id: 3, name: 'baz' },
        { id: 4, nam