How do I get input from a v-menu? - vue.js

Question

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 class="first_name">
<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!

Answer 1

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>