如何使用 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(),

})