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(),

})

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

1 个答案: