无头 UI 组合框（自动完成）：选择用户后删除输入

Question

我在 Vue 项目中使用 Headless UI 库的 Combobox 组件。我的设置涉及使用组合框进行多项选择。一切都按预期工作，除了一个方面：在做出选择后我似乎无法清除 ComboboxInput 值。

这是我当前的代码设置：

<template>
  <Combobox v-model="selectedUsers" multiple>
    <!-- ... rest of the component ... -->
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(user) => user.name"
      class="w-full text-sm py-2 focus:outline-none focus-visible:outline-none rounded-lg"
      placeholder="Mitarbeiter hinzufügen..."
    />
    <!-- ... rest of the component ... -->
  </Combobox>
</template>

<script setup>
  // ... imports ...

  const selectedUsers = ref([]);
  const query = ref('');

  // ... rest of the setup code ...
</script>

我的目标是每次选择一个选项时都清除输入字段（ComboboxInput）。我尝试了多种方法，例如使用 @select 事件、使用 refs 手动更改值以及观察 v-model 来检测更改，但似乎没有任何效果。

这里有人知道如何在进行选择后清除输入（使用鼠标或键盘）吗？

Answer 1

尝试在 React 中解决完全相同的问题，使用

document.getElementbyID

来清除作为解决方法，但绝对不是一个很好的 React 解决方案。

最终对我有用的是添加一个带有 selected.length 的键来强制重新渲染。

key={selectedUsers.length}