使用 vue.components 时如何使用 v-item-group - Vuetify

Posted 2023-02-16

【中文标题】使用 vue.components 时如何使用 v-item-group - Vuetify

【英文标题】：How to use v-item-group when using vue.components - Vuetify

【发布时间】：2021-12-14 04:51:18

【问题描述】：

我正在尝试使用Vuetify 创建一组可选项目。 然而，它不起作用，因为在模板中我使用了一个名为 fm-card 的 Vue.component。

当您使用Vue.component 时，您必须使用@click.native 而不是@click。

<v-item-group active-class="primary">
  <v-container>
    <v-row justify="center">
      <v-col
        class="fm-card-container"
        cols="2"
        v-for="item in items"
        v-bind:key="item.id"
      >
        <v-item v-slot=" active, toggle ">
          <fm-card
            @click.native="toggle;"
            class="fm-card d-flex align-center"
            :title="item.name"
            :image="productImage(item.image)"
            :imageHeight="95"
            dark
            
            :color="active ? 'primary' : ''"
          >
            `hola soy el $toggle`
            <v-scroll-y-transition>
              <div v-if="active" class="text-h2 flex-grow-1 text-center">
                Active
              </div>
            </v-scroll-y-transition>
          </fm-card>
        </v-item>
      </v-col>
    </v-row>
  </v-container>
</v-item-group>

我尝试过使用@click 和@click.native，但似乎什么都没有发生

【问题讨论】：

vuetifyjs.com/en/components/item-groups

【参考方案1】：

首先，你为什么不把你的<fm-card> 作为一个“真正的”组件并在你的父组件中引用它并传递你在那里使用的所有values？

这样

<fm-card :value1="value1" :value2="value2"/>

你可以把你的完整代码放在这个组件中 - 它让你的代码更清晰。

而且我认为您不再需要使用@click.native...@click 应该足够了，但要检查您的toggle; 后面是否有分号 - 您必须删除它！

您可以像这样使用您的方法并使用您的点击事件：

methods: 
  toggle() 
    //your code in here
  

希望这对您有所帮助！请告诉我！