Vue 3＜script setup＞使用v-for渲染数组中的元素,根据传入id删除数组元素（filter方法根据元素id过滤数组中的元素）

首先，需要在<script setup>中定义组件的数据和方法。然后，在模板中使用v-for来遍历数组并渲染元素，每个元素旁边添加一个删除按钮，并通过点击事件调用删除方法。

<template>  
  <div>  
    <div v-for="item in items" :key="item.id">  
      {{ item.name }}  
      <button @click="deleteItem(item.id)">删除</button>  
    </div>  
  </div>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
  
// 假设这是你的初始数组  
const items = ref([  
  { id: 1, name: 'Item 1' },  
  { id: 2, name: 'Item 2' },  
  { id: 3, name: 'Item 3' },  
]);  
  
// 删除元素的方法  
function deleteItem(id) {  
  // 使用filter方法过滤掉id匹配的元素  
  items.value = items.value.filter(item => item.id !== id);  
}  
</script>

解释

1. 数据定义：使用ref来创建一个响应式的数组items，它包含了一些具有id和name属性的对象。

2. 模板渲染：在模板中，使用v-for指令来遍历items数组，并为每个元素渲染一个包含名称和删除按钮的div。@click事件监听器被添加到删除按钮上，当按钮被点击时，会调用deleteItem方法并传入当前元素的id。

3. 删除方法：deleteItem方法接收一个id作为参数，并使用filter方法来创建一个新数组，这个新数组不包含任何id与传入参数相匹配的元素。然后，将这个新数组赋值给items.value，由于items是响应式的，Vue会自动更新DOM以反映这个变化。

注意

• 确保在v-for中使用:key来为每个渲染的元素提供一个唯一的键，这有助于Vue跟踪每个节点的身份，从而重用和重新排序现有元素。
• 在这个例子中，使用了items.value来访问ref的当前值，因为在<script setup>中，ref和reactive的返回值是自动解包的，但在深层嵌套或某些特定情况下（如函数内），你可能需要显式地访问.value。
• 使用filter方法是一种非破坏性的方式来更新数组，因为它不会修改原始数组，而是返回一个新数组。这是Vue响应式系统所期望的，因为它依赖于新旧值的比较来触发更新。