Vue多选模板插槽清除不起作用

在Vue中，模板插槽（Template Slots）是一种分发内容的机制，允许你将内容从父组件插入到子组件的特定位置。多选模板插槽通常用于自定义列表项的选择行为，比如在一个可多选的列表中。

如果你遇到Vue多选模板插槽清除不起作用的问题，可能是由于以下几个原因：

插槽内容未正确更新：确保你的插槽内容在数据变化时能够响应式地更新。
事件绑定问题：如果你使用了事件绑定（如@click），确保事件处理函数正确执行，并且能够触发相应的状态更新。
作用域插槽（Scoped Slots）：如果你使用了作用域插槽，确保传递给插槽的数据是正确的，并且在父组件中正确处理。

以下是一个简单的Vue 3示例，展示如何使用多选模板插槽，并确保清除功能能够正常工作：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" :value="item" v-model="selectedItems" />
        <span>{{ item }}</span>
        <!-- 使用具名插槽来插入自定义内容 -->
        <template #customSlot>
          <!-- 清除按钮，点击时调用clearSelection方法 -->
          <button @click="clearSelection(item)">清除</button>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    const selectedItems = ref([]);

    function clearSelection(item) {
      // 使用filter方法移除选中的项
      selectedItems.value = selectedItems.value.filter(selectedItem => selectedItem !== item);
    }

    return {
      items,
      selectedItems,
      clearSelection
    };
  }
};
</script>

在这个例子中，我们有一个列表，每个列表项都有一个复选框和一个清除按钮。点击清除按钮会调用clearSelection方法，该方法会从selectedItems数组中移除对应的项。

参考链接：