首先，需要在<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>解释
-
数据定义：使用
ref来创建一个响应式的数组items，它包含了一些具有id和name属性的对象。 -
模板渲染：在模板中，使用
v-for指令来遍历items数组，并为每个元素渲染一个包含名称和删除按钮的div。@click事件监听器被添加到删除按钮上，当按钮被点击时，会调用deleteItem方法并传入当前元素的id。 -
删除方法：
deleteItem方法接收一个id作为参数，并使用filter方法来创建一个新数组，这个新数组不包含任何id与传入参数相匹配的元素。然后，将这个新数组赋值给items.value，由于items是响应式的，Vue会自动更新DOM以反映这个变化。
注意
- 确保在
v-for中使用:key来为每个渲染的元素提供一个唯一的键，这有助于Vue跟踪每个节点的身份，从而重用和重新排序现有元素。 - 在这个例子中，使用了
items.value来访问ref的当前值，因为在<script setup>中，ref和reactive的返回值是自动解包的，但在深层嵌套或某些特定情况下（如函数内），你可能需要显式地访问.value。 - 使用
filter方法是一种非破坏性的方式来更新数组，因为它不会修改原始数组，而是返回一个新数组。这是Vue响应式系统所期望的，因为它依赖于新旧值的比较来触发更新。
