How do I get input from a v-menu?-CodePudding

I am new to Vue, and I am trying to figure out it it all works together. I want to create a drop-down menu so the user can select what type of user they are.

This is my template:

<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>

And this is my script:

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

Basically, I want the user to select whether they are a Client or a Freelancer, and I want to store that result in the user_type variable. I was able to store their other details using v-model's like so:

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

I can't use a v-model with v-menu though, as it seems to return a boolean value for some reason. I have all of the basic functionality working, I just need to be able to access the user's choice in the drop-down menu. Is there something I am just not grasping here? Thanks!

CodePudding user response：

If you use v-list-item-group tag as parent of v-list-item you can use v-model on v-list-item-group and this will give the index of selected item.

<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>