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

Question

// 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>

这是为什么....

Answer 1

试一下数组的filter？

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