如何在vuetify中将菜单(下拉)添加到项目列表?

时间:2020-08-17 07:50:52

标签: javascript vue.js frontend vuetify.js

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

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

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

0 个答案:

没有答案