Saya menggunakan v-card dari Vuetify. Saya ingin membuat kartu dapat diklik jadi saya menggunakan properti "ke". Ini bekerja dengan cukup baik. masalahnya adalah ketika saya menambahkan menu di sisi kanan atas. Ketika saya mengklik menu kartu itu menghitungnya saat saya mengklik kartu-v yang menjalankan hal-hal lain.

Saya mencoba memasukkan gambar dan teks dalam v-btn tetapi semua CSS lain yang diperlukan bukanlah solusi nyata. Saya juga mencoba untuk memiliki gambar dan teks di div dengan router-link tetapi sisi kiri tombol menu tidak dapat diklik.

Apakah infrastruktur memiliki solusi untuk hal seperti ini?

Berikut adalah template dari komponen.

      <v-card :to="'/' + card.name + '/launch'" exact tile>
        <v-card-actions>
          <v-menu auto offset-y>
            <template v-slot:activator="{ on }">
              <v-btn icon v-on="on">
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list>
              <v-list-item
                v-for="(item, i) in card.menuItems" 
                      :key="i" @click="item.action">
                <v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>{{ item.text }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-card-actions>
          <v-img :src="card.image" class="mx-auto" width="72"></v-img>
          <v-card-title class="pb-0 mb-3 justify-center" style="font-family:'Google Sans',Roboto,sans-serif; line-height:1.1;">{{ card.title }}</v-card-title>
          <v-card-text class="text--secondary rtl">{{ card.content }}</v-card-text>
      </v-card>

Terima kasih sebelumnya!!

2
Yakiros 23 Maret 2020, 17:23

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan stop pengubah acara di menu @klik tindakan item, dan .prevent pada menu btn...

      <v-card :to="'/launch'" exact tile>
            <v-card-actions>
                <v-menu auto offset-y>
                    <template v-slot:activator="{ on }">
                        <v-btn icon v-on="on" v-on:click.prevent>
                            <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                    </template>
                    <v-list>
                        <v-list-item v-for="(item, i) in items" :key="i" @click.stop="item.action">
                            <v-list-item-icon>
                                <v-icon>{{ item.icon }}</v-icon>
                            </v-list-item-icon>
                            <v-list-item-content>
                                <v-list-item-title>{{ item.text }}</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                </v-menu>
            </v-card-actions>
            <v-img src="//placehold.it/200" class="mx-auto" width="72"></v-img>
            <v-card-title class="pb-0 mb-3 justify-center" style="font-family:'Google Sans',Roboto,sans-serif; line-height:1.1;">Title</v-card-title>
            <v-card-text class="text--secondary rtl">Card text...</v-card-text>
       </v-card>

https://codeply.com/p/viy24oqC2j

2
Zim 23 Maret 2020, 15:30