我正在使用Laravel的 vue-starter-kit，在 resources/js/components/ui/ 文件夹里有一些不同的UI组件。例如，如果你需要使用Input，就很容易，下面是做法：

import { Input } from '@/components/ui/input';

<Input id="name" v-model="team.name" type="text" placeholder="choose a name..." />

现在我想使用 Select 组件，但我不知道该怎么做！我有一个名为 groups 的对象数组，需要把它作为Select组件的选项。（每个分组有一个title 和一个id）

import { Select } from '@/components/ui/select';

<Select v-model="team.group" :options="groups" />

当然，当我按这种方式去使用Select组件时，仍然无路可走！我该如何使用这个Select UI组件？需要导入哪些内容，如何传入我的选项？

解决方案

你需要先导入这些：

<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
</script>

接着，在 template 部分，这是你需要如何使用它们：

<template>
  <Select>
    <SelectTrigger class="w-[180px]">
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Fruits</SelectLabel>
        <SelectItem value="apple">
          Apple
        </SelectItem>
        <SelectItem value="banana">
          Banana
        </SelectItem>
        <SelectItem value="blueberry">
          Blueberry
        </SelectItem>
        <SelectItem value="grapes">
          Grapes
        </SelectItem>
        <SelectItem value="pineapple">
          Pineapple
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>

这样你就可以遍历你的groups数组来生成选项：

<template>
  <Select>
    <SelectTrigger class="w-[180px]">
      <SelectValue placeholder="Select a group" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Groups</SelectLabel>
        <SelectItem v-for="group in groups" :value="group.id">
          {{group.title}}
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>

备选方案

<script setup>
import {Select,SelectContent,SelectItem,SelectTrigger,SelectValue,} from '@/components/ui/select';

const groups = [{ id: 1, title: 'Admins' },{ id: 2, title: 'Editors' },{ id: 3, title: 'Users' },];

const team = reactive({group: '',});</script>

<template><Select v-model="team.group"><SelectTrigger class="w-full"><SelectValue placeholder="Choose a group" /></SelectTrigger>

    \<SelectContent\>  
        \<SelectItem  
            v-for="group in groups"  
            :key="group.id"  
            :value="String(group.id)"  
        \>  
            {{ group.title }}  
        \</SelectItem\>  
    \</SelectContent\>  
\</Select\>  

</template>

Laravel Vue starter kit的 Select组件不像原生 那样支持 :options属性。你需要用SelectTrigger、SelectValue、SelectContent和 SelectItem来组合实现。

SelectItem 需要一个 value，并且 v-model 将会接收到那个值。如果你需要 team.group 作为数字，在保存时将其转换：

team.group = Number(team.group);