V-在vuetify中选择全部和清除的自动完成

<template>
  <v-autocomplete
    v-model="selectedItems"
    :items="options"
    multiple
    :select-all="selectAll"
    :item-text="item => item.name"
    :item-value="item => item.id"
    label="选择项"
  ></v-autocomplete>
  <v-btn @click="selectAllItems">选择全部</v-btn>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      options: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        // 其他选项...
      ],
    };
  },
  methods: {
    selectAll() {
      this.selectedItems = this.options;
    },
    selectAllItems() {
      this.$refs.autocomplete.select;
    },
  },
};
</script>

<template>
  <v-autocomplete
    v-model="selectedItem"
    :items="options"
    clearable
    :item-text="item => item.name"
    :item-value="item => item.id"
    label="选择项"
  ></v-autocomplete>
  <v-btn @click="clearSelection">清除</v-btn>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      options: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        // 其他选项...
      ],
    };
  },
  methods: {
    clearSelection() {
      this.selectedItem = null;
    },
  },
};
</script>