javascript - 如何将菜单（下拉菜单）添加到 vuetify 中的项目列表？

Question

“菜单可以放置在几乎任何组件中”在 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>

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

标签： javascriptvue.jsfrontendvuetify.js