如何使用 vuetify 擴展面板 @click？

Question

如果我使用<a> ， <v-btn> 擴展面板設計總是被破壞，這種情況下如何使用click事件？

我嘗試使用filters 、 watch和computed ，但我沒有。

這是我的代碼：

 <v-card xs12 sm6 md12>
         <template v-for="item in activityitems">
              <v-layout v-bind:key="item.ActivityID">
                     <a @click="activityList(item.ActivityID)">
                        <v-expansion-panel>
                           <v-expansion-panel-content>
                               <template v-slot:header>
                                    <v-card flat>
                                       <v-card-title>
                                        <span class="grey--text">
                                              Name:{{item.ActivityName}}
                                        </span>
                                       </v-card-title>
                                     </v-card>
                                     <v-card flat>
                                        <v-card-title>
                                          <span class="grey--text">
                                              Date:{{item.ActivityDate}}
                                          </span>
                                         </v-card-title>
                                      </v-card>
                                  </template>
                             </v-expansion-panel-content>
                         </v-expansion-panel>
                       </a>
                 </v-layout>
          </template>
</v-card>

Answer 1

你可以將@click直接傳遞給<v-expansion-panel>標簽

喜歡這支筆

https://codepen.io/gonjeshk/pen/MWWPveX?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-expansion-panels>
      <v-expansion-panel
        v-for="(item,i) in activityitems"
        :key="i"
        @click="activityList(item.ActivityID)"
      >
        <v-expansion-panel-header>{{item.ActivityID}}</v-expansion-panel-header>
        <v-expansion-panel-content>{{item.ActivityName}}</v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-app>
</div>

new Vue({
  el: '#app',
  data: {
    activityitems: [
      { ActivityID: "Learn JavaScript", ActivityName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
      { ActivityID: "Learn Vue", ActivityName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
      { ActivityID: "Play around in JSFiddle", ActivityName: 'sed do eiusmod tempor aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
      { ActivityID: "Build something awesome", ActivityName: 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' }
    ]
  },
  methods: {
    activityList: function(id){
        console.log(id)
    }
  },
  vuetify: new Vuetify(),

})