vue3 删除数组元素，但视图不更新？

• Z时代
• 2024-02-07
• 分类：IT

// parent.vue
<template>
    <art-item-component v-for="item in articlesList" :key="item.art_id" :item="item" :showAction="true" @removeArticleItem="removeArticleItem" />
</template>
<script setup>
import { ref } from 'vue'
const articlesList = ref([])
const removeArticleItem = (currentId) => {
    const target = articlesList.value.findIndex(item => {
        return item.art_id === currentId.value
    })
    articlesList.value.splice(target, 1)
    // 此时打印 数组确实已被修改，但是视图没有更新
}
</script>

// child.vue
<script setup>
const emits = defineEmits(['removeArticleItem'])
emits('removeArticleItem', 1)
</script>

这是为什么....

回答：

试一下数组的filter？

const removeArticleItem = (currentId) => {
   articlesList.value = articlesList.value.filter((i) => {
      return i.art_id != currentId
   })
}

以上是 vue3 删除数组元素，但视图不更新？ 的全部内容， 来源链接： utcz.com/p/937489.html