Vuetify中如何用v-autocomplete重复选择同一标签（chip）

默认v-autocomplete多选模式下，因绑定字符串数组会自动去重相同值，且hide-selected会隐藏已选项，导致无法重复选择。实现重复选择需调整以下几点：

• 修改选项数据结构：将字符串数组改为带唯一标识的对象数组，让组件能识别“同名不同项”
• 移除hide-selected属性：保留所有选项的可选择状态
• 调整绑定逻辑：通过对象的唯一标识区分选项，避免自动去重

修改后的完整代码 #

Vue模板部分

<v-autocomplete
    filled
    chips
    multiple
    v-model="selectedRooms"
    :items="roomChoices"
    item-text="text"
    item-value="id"
    hide-no-data
    label="Select Rooms"
    placeholder="Select from the available choices"
    prepend-icon="mdi-bed"
    clearable
    deletable-chips
>
</v-autocomplete>

JavaScript数据部分

data: () => ({
    property_name: null,
    dialog_active: false,
    // 改为对象数组，用唯一id区分同文本选项
    roomChoices: [
        { id: 1, text: 'bedroom' },
        { id: 2, text: 'kitchen' },
        { id: 3, text: 'bathroom' },
        { id: 4, text: 'living-room' },
        // 可添加更多同文本不同id的选项，支持多次选择
        { id: 5, text: 'bedroom' },
        { id: 6, text: 'kitchen' }
    ],
    selectedRooms: [],
    values: [],
}),

动态无限重复选择的扩展方案 #

如果需要支持无限次选择同一文本标签，可通过监听选择事件手动添加新对象到绑定数组：

<v-autocomplete
    ...
    @change="handleRoomSelect"
>
</v-autocomplete>

methods: {
    handleRoomSelect(newValue) {
        const lastSelected = newValue[newValue.length - 1];
        if (lastSelected) {
            // 生成带新唯一id的对象，避免组件识别为同一选项
            const newItem = { ...lastSelected, id: Date.now() };
            this.selectedRooms.push(newItem);
        }
    }
}

内容的提问来源于stack exchange，提问作者Simao