Javascript 如何在vuetify中将菜单（下拉菜单）添加到项目列表？

“菜单几乎可以放在任何组件中”，Vuetify的 但我试图将其放入列表项中，但它不起作用：

<template>
    <v-row align="center" justify="center" cols="12">
        <v-col cols="12" sm="10" md="6" lg="8">
            <v-list three-line>
                <v-subheader>Saved Addresses</v-subheader>
                <template v-for="address in userAddresses">
                    <v-menu bottom left :id="address.id">
                        <template v-slot:activator="{ on, attrs }">
                            <v-list-item :key="address.id" @click="">

                                <v-list-item-avatar>
                                    <v-icon>home</v-icon>
                                </v-list-item-avatar>

                                <v-list-item-content>
                                    <v-list-item-title>{{address.adress}}
                                    </v-list-item-title>
                                    <v-list-item-subtitle>{{address.country_id }}, {{address.state_id}},
                                        {{address.city_id}}
                                        <strong>| {{address.postal_code}}</strong></v-list-item-subtitle>
                                </v-list-item-content>


                            </v-list-item>
                        </template>
                        <v-list>
                            <v-list-item>
                                <v-list-item-title>Edit</v-list-item-title>
                            </v-list-item>
                        </v-list>
                    </v-menu>
                </template>
            </v-list>
        </v-col>
    </v-row>
</template>

保存的地址
家
{{地址.地址}
{{address.country\u id}，{{address.state\u id}，
{{address.city_id}
{{地址.邮政编码}
编辑

当我单击任何列表项时，它不会显示下拉菜单，我尝试了包装菜单模板的不同组合，但结果相同，甚至出现错误