如何从 v-menu 获取输入？

Question

我是 Vue 的新手，我正在努力弄清楚它是否可以协同工作。我想创建一个下拉菜单，以便用户可以 select 他们是什么类型的用户。

这是我的模板：

<v-menu offset-y>
    
    <template v-slot:activator="{ on, attrs }">
        
        <v-btn color="blue" v-bind="attrs" v-on="on"> User Type </v-btn>
        
    </template>
    
    <v-list>
        
        <v-list-item v-for="(item, index) in items" :key="index" v-model="user_type">
            
            <v-list-item-title>{{ item.title }}</v-list-item-title>
        
        </v-list-item>
        
    </v-list>

</v-menu>

这是我的脚本：

data() {
    return {
      email: "",
      password: "",
      error: "",
      first_name: "",
      surname: "",
      items: [{ title: "Client" }, { title: "Freelancer" }],
      user_type: "",
    };
  }

基本上，我希望用户 select 无论他们是 Client 还是 Freelancer，我想将该结果存储在 user_type 变量中。我可以像这样使用 v-model 存储他们的其他详细信息：

<div class="first_name">
    <input 
        type="first_name"
        v-model="first_name"
        placeholder="First Name"
    />
</div>

我不能将 v-model 与 v-menu 一起使用，因为出于某种原因它似乎 return 是一个布尔值。我有所有的基本功能，我只需要能够访问用户在下拉菜单中的选择。有什么我不明白的吗？谢谢！

Answer 1

如果您使用 v-list-item-group 标签作为 v-list-item 的父标签，您可以在 v-list-item-group 上使用 v-model，这将给出所选项目的索引。

<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
 <v-btn color="blue" v-bind="attrs" v-on="on"> User Type </v-btn>
</template>
<v-list>
 <v-list-item-group v-model="user_type">
   <v-list-item v-for="(item, index) in items" :key="index">
     <v-list-item-title>{{ item.title }}</v-list-item-title>
   </v-list-item>
</v-list>
</v-menu>

如何从 v-menu 获取输入？

How do I get input from a v-menu?

vue.js

vuetify.js