为Vue Headless UI Listbox组件添加原生验证的最优方案咨询

我正在Vue3/Nuxt3环境中使用Headless UI的Listbox组件（作为下拉选择器），但该组件不支持原生表单验证。我需要实现未选择值时阻止表单提交，并显示原生验证提示的功能，希望用最简最优的方式实现，尽量少写额外代码。

我的DropDown.vue组件代码 #

<template>
  <div class="flex-col items-center">
    <label class="w-1/6 pb-1 text-sm font-semibold">{{ label }}</label>
    <Listbox
      v-model="item"
      @update:modelValue="onItemChange"
      :required="required"
      :default-value="defaultSelectionRef"
    >
      <div class="relative z-10 w-full">
        <ListboxButton
          class="dropdown relative w-full pl-3 text-sm text-left sm:text-sm rounded h-12 border border-gray-300 dark:border-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
          :required="required"
        >
          <span class="block truncate dark:text-white">{{ item.text }}</span>
          <span
            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
          >
            <Icon icon="fe:arrow-down" />
          </span>
        </ListboxButton>
        <transition
          leave-active-class="transition duration-100 ease-in"
          leave-from-class="opacity-100"
          leave-to-class="opacity-0"
        >
          <ListboxOptions
            class="absolute mt-1 w-full overflow-auto rounded shadow-md bg-white py-1 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm dark:bg-slate-800 dark:text-white"
            :required="required"
          >
            <ListboxOption
              v-slot="{ active }"
              v-for="option in options"
              :key="option.value"
              :value="option"
              as="template"
              :disabled="option.disabled"
              :required="required"
            >
              <li
                :class="[
                  active ? 'bg-[#E5F0FC] dark:bg-slate-700' : '',
                  'relative select-none py-2 pl-4 pr-4 cursor-pointer',
                ]"
                :required="required"
              >
                <span :class="option.class">{{ option.text }}</span>
              </li>
            </ListboxOption>
          </ListboxOptions>
        </transition>
      </div>
    </Listbox>
  </div>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import {
  Listbox,
  ListboxButton,
  ListboxOptions,
  ListboxOption,
} from "@headlessui/vue";

const props = defineProps({
  label: {
    type: String, // label for the dropdown field
    required: false,
  },
  defaultSelection: {
    type: Object, // default selected item in drop down
    required: false,
  },
  options: {
    type: Array, // array of options in the drop down
    required: true,
  },
  required: {
    type: Boolean, // condition based on which dropdown becomes required or not
    required: false,
  },
  modelValue: {
    type: [String, Number, Object, null], // name of the corresponding model for dropdown field
    required: false,
  },
});

const defaultSelectionRef = computed(() => {
  //Get existing model value for the dropdown
  const modelValue = props.modelValue;

  //If there is no existing value return 1st element of dropdown options array
  if (modelValue === undefined || modelValue === null) {
    return props.options[0];
  }

  //If there is existing value then return matching element from options array
  return (
    props.options.find((obj) => obj.value === modelValue) ||
    props.options.find((obj) => obj.value === modelValue.value)
  );
});

const item = ref(defaultSelectionRef.value);

const emits = defineEmits(["onItemChange", "update:modelValue"]);

watch(defaultSelectionRef, (newValue) => {
  item.value = newValue;
});

// Emit the updated modelValue when the selectedOption changes
watchEffect(() => {
  emits("update:modelValue", item.value.value);
});

const onItemChange = () => {
  emits("onItemChange", props.model, item.value);
};
</script>

组件在pages/test.vue中的使用代码 #

<template>
    <form @submit.prevent="submitForm">
      <div class="overflow-x-auto shadow-md sm:rounded-lg">
        <table class="w-full text-sm dark:text-white">
          <caption />
          <th id="tableHeader" />
          <tbody>
            <tr class="bg-white dark:bg-gray-800 dark:border-gray-700">
              <td
                class="px-4 py-4 whitespace-nowrap text-center bg-gray-500 text-white dark:text-black"
              >
                <DropDown
                  v-model="formData.type"
                  :label="$t('pages.modal.select-type')"
                  :options="options"
                  :required="true"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <button
        type="submit"
        class="mt-2 mb-2 text-green-700 border-green-700 focus:ring-green-300 hover:bg-green-700 dark:hover:bg-green-500 dark:focus:ring-green-800 dark:border-green-500 dark:text-green-500 block rounded-full hover:text-white border focus:ring-4 focus:outline-none font-medium text-sm px-5 py-2.5 text-center dark:hover:text-white"
      >
        {{ $t("pages.modal.submit") }}
      </button>
    </form>
  </template>

  <script setup>
  //Import static values for dropdowns
  import {
    options,
  } from "~/public/Static/DefaultValues";
  const formData = ref({});

  const submitForm = async (event) => {
    console.log("Form submitted successfully");
  };
  </script>

  <style>
  </style>

最简实现方案 #

Headless UI的Listbox是无包装组件，不会自动生成原生<select>或<input>元素，因此需要手动绑定一个隐藏的原生表单控件来触发验证逻辑。

步骤1：添加隐藏的原生输入框 #

在DropDown.vue的模板中，Listbox同级位置添加一个隐藏的<input>，作为验证的载体：

<template>
  <div class="flex-col items-center">
    <label class="w-1/6 pb-1 text-sm font-semibold">{{ label }}</label>
    <!-- 隐藏输入框：绑定v-model和required属性，用于触发原生验证 -->
    <input
      type="hidden"
      v-model="modelValue"
      :required="required"
      :name="name" <!-- 可选：表单提交时携带字段名 -->
    />
    <Listbox
      v-model="item"
      @update:modelValue="onItemChange"
      :default-value="defaultSelectionRef"
    >
      <!-- 原有Listbox内容保持不变 -->
    </Listbox>
  </div>
</template>

同时在props中添加可选的name属性：

const props = defineProps({
  // ... 原有props
  name: {
    type: String,
    required: false
  }
});

步骤2：调整默认选中逻辑（核心） #

当前代码会在modelValue为空时默认选中第一个选项，导致required验证永远通过。修改defaultSelectionRef，当组件为必填且无初始值时，返回null：

const defaultSelectionRef = computed(() => {
  const modelValue = props.modelValue;

  // 必填且无初始值时，不选中任何选项
  if (props.required && (modelValue === undefined || modelValue === null)) {
    return null;
  }

  // 非必填或已有初始值时，按原有逻辑处理
  if (modelValue === undefined || modelValue === null) {
    return props.options[0];
  }

  return (
    props.options.find((obj) => obj.value === modelValue) ||
    props.options.find((obj) => obj.value === modelValue.value)
  );
});

添加监听确保required状态变化时同步选中项：

watch(() => props.required, () => {
  item.value = defaultSelectionRef.value;
});

步骤3：处理空选中时的显示文本 #

当item为null时，ListboxButton的{{ item.text }}会报错，添加默认占位文本：

<ListboxButton
  class="dropdown relative w-full pl-3 text-sm text-left sm:text-sm rounded h-12 border border-gray-300 dark:border-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
>
  <span class="block truncate dark:text-white">{{ item?.text || '请选择' }}</span>
  <!-- 原有图标部分不变 -->
</ListboxButton>

步骤4：手动触发验证（可选） #

在表单提交方法中，调用原生表单的验证方法确保提示正常显示：

const submitForm = async (event) => {
  const form = event.target;
  if (!form.checkValidity()) {
    form.reportValidity(); // 触发原生验证提示
    return;
  }
  console.log("Form submitted successfully");
};

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