当v-btn具有v-for时,为什么v-menu无法与v-btn一起使用

时间:2020-10-25 10:40:15

标签: vue.js vuejs2 vuetify.js

我一直在尝试在v-btn上实现v-for的v-menu。没有v-for,它可以正常工作。我正在使用axios检索类别名称。所以不要介意。我只希望v菜单像这样工作。

    <div class="text-center">
              <v-menu
                :close-on-content-click="false"
                :nudge-width="200"
                offset-x
              >
                <template v-slot:activator="{ on, attrs }">
                 
                    <v-btn
                      color="indigo"
                      dark
                      v-bind="attrs"
                      v-on="on"
                      :value="categoryid"
                       v-for="(categoryItem, i) in categoryList" :key="i"
                      @click="subcat(categoryItem._id)"
                    >
             
                      {{ categoryItem.cname }}
                    </v-btn>
                 
                </template>

                <v-card>
                  <v-list>
                    <v-list-item>
                      <v-list-item-avatar>
                        <img
                          src="https://cdn.vuetifyjs.com/images/john.jpg"
                          alt="John"
                        />
                      </v-list-item-avatar>

                      <v-list-item-content>
                        <v-list-item-title>John Leider</v-list-item-title>
                        <v-list-item-subtitle
                          >Founder of Vuetify</v-list-item-subtitle
                        >
                      </v-list-item-content>

                      <v-list-item-action>
                        <v-btn icon>
                          <v-icon>mdi-heart</v-icon>
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>

                  <v-divider></v-divider>

                  
                </v-card>
              </v-menu>
            </div>

0 个答案:

没有答案