0

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

当您使用 a 时，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
            height="200"
            :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 但似乎什么也没发生

4

1 回答 1

0

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

像这样

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

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

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

比你可以去你的方法并像这样处理你的点击事件：

methods: {
  toggle() {
    //your code in here
  }
}

希望这可以帮助你！请告诉我！

于 2021-10-29T07:12:16.060 回答