如何在Vue.js中监听Tailwind Listbox组件的事件变化？

核心问题原因 #

@headlessui/vue 的 Listbox 组件遵循 Vue 的事件规范，不支持 React 风格的 onChange 事件——这就是你添加该事件后从未触发的原因。原生 <select> 的 @change 是浏览器原生事件，和自定义组件的事件机制完全不同。

两种可行解决方案 #

方案1：使用 v-model 结合监听（推荐）

直接用 v-model 绑定选中值，再通过 watch 监听值的变化：

<template>
  <Listbox v-model="selectedItem">
    <ListboxButton>{{ selectedItem.label }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption 
        v-for="item in options" 
        :key="item.value" 
        :value="item"
      >
        {{ item.label }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'

const options = ref([
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
])
const selectedItem = ref(options.value[0])

// 监听选中项变化
watch(selectedItem, (newValue) => {
  // 这里处理你的业务逻辑
  console.log('选中了:', newValue)
})
</script>

方案2：手动监听 update:model-value 事件

v-model 本质是 modelValue 属性 + update:model-value 事件的语法糖，你也可以手动拆解监听：

<template>
  <Listbox 
    :model-value="selectedItem" 
    @update:model-value="handleSelectionChange"
  >
    <ListboxButton>{{ selectedItem.label }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption 
        v-for="item in options" 
        :key="item.value" 
        :value="item"
      >
        {{ item.label }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'

const options = ref([
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
])
const selectedItem = ref(options.value[0])

const handleSelectionChange = (newValue) => {
  selectedItem.value = newValue
  // 执行你的变化逻辑
  console.log('选中项更新为:', newValue)
}
</script>

额外说明 #

如果需要获取选中操作的原始DOM事件，Listbox 组件还提供了 @select 事件，会传递包含选中值和事件对象的参数：

<Listbox @select="(event) => console.log('选中值:', event.value, '事件对象:', event.event)">
  <!-- 组件内容 -->
</Listbox>

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