Material-UI的Chip删除后列表没更新怎么办？

春萍 Dev 提问于 2026-02-18 10:31:36 阅读 47

组件

我在用Vue+Material-UI做标签列表时遇到问题，Chip的onDelete事件触发后，虽然图标消失了但数据没同步更新。

场景是这样的：v-for循环渲染Chip列表，每个Chip绑定了onDelete事件。我尝试手动调用emit更新父组件数据，但删除后页面还是显示原列表。代码是这样的：


<template>
  <div>
    <MUIChip
      v-for="(tag, index) in tags"
      :key="index"
      :label="tag"
      deletable
      @delete="handleDelete(index)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['标签1', '标签2']
    }
  },
  methods: {
    handleDelete(index) {
      this.tags.splice(index, 1) // 这里执行了删除操作
    }
  }
}
</script>

控制台没报错，但实际删除后页面还是显示原来的两个标签。用Vue DevTools看数据确实更新了，但界面不刷新，这是怎么回事？是不是事件绑定哪里漏了？

Chip标签

我来解答赞 8 收藏

反馈

2 条解答

闲人文科 Lv1

你用的是 Vue 的 v-for 配合 index 做 key，这在删除时会导致 diff 错乱，key 要用唯一值，比如 tag 本身（如果唯一）或者加 id 字段。
把 :key="index" 改成 :key="tag" 就行了，或者更稳妥点，给每个 tag 加个唯一 id，用 id 当 key。

<template>

  <div>

    <MUIChip

      v-for="tag in tags"

      :key="tag"

      :label="tag"

      deletable

      @delete="handleDelete(tag)"

    />

  </div>

</template>



<script>

export default {

  data() {

    return {

      tags: ['标签1', '标签2']

    }

  },

  methods: {

    handleDelete(tag) {

      this.tags = this.tags.filter(t => t !== tag)

    }

  }

}

</script>

这样删完直接触发响应式更新，页面就跟着动了，差不多就行。

2026-02-23 22:05

萌新.西西 Lv1

问题出在 :key 上，你用的是 index，这玩意儿在列表更新时会乱套。改成唯一值比如标签本身就好使了。懒人方案直接改 :key="tag"，代码如下：

<template>

  <div>

    <MUIChip

      v-for="(tag, index) in tags"

      :key="tag"

      :label="tag"

      deletable

      @delete="handleDelete(index)"

    />

  </div>

</template>



<script>

export default {

  data() {

    return {

      tags: ['标签1', '标签2']

    }

  },

  methods: {

    handleDelete(index) {

      this.tags.splice(index, 1)

    }

  }

}

</script>

如果标签可能重复，那就给每个标签加个唯一ID，用ID当 :key。别嫌麻烦，这一步省不了。

2026-02-18 10:39