vue 2 обработчик @click не работает должным образом - PullRequest
Новая
       27

vue 2 обработчик @click не работает должным образом

0 голосов
/ 22 апреля 2019

У меня есть компонент «карточка» с множеством «граней».
Нажмите на карточку, и она покажет другое лицо. 

<template lang="pug">
  .infini-card(@click.prevent="clickCard")
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>

Div .infini-card имеет обработчик щелчка иЯ могу сделать switch () там, чтобы обработать изменения для всех видов лиц.Круто.

Но первое, что я попробовал, не сработало: 

<template lang="pug">
  .infini-card
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData" @click.prevent="clickSecret")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>

Метод clickSecret () никогда не вызывается на грани v-if.Этот компонент создается в другом шаблоне pug, например: infini-card(v-bind.sync="cardA")

Почему?: -)

Заранее спасибо!

1 Ответ

0 голосов
/ 23 апреля 2019

Обратите внимание, что @click работает по-разному для собственных элементов по сравнению с компонентами vue.

В собственном компоненте (<div>, <button>) @click прослушивает событие щелчка.

Вкл.пользовательский компонент (<infini-card-secret>) @click прослушивает событие, генерирующее «щелчок» из этого пользовательского компонента (this.$emit('click'))

  • Чтобы убедиться, что @click прослушивает собственное событие щелчкав пользовательских компонентах используйте модификатор .native, например:
    • @click.native="clickSecret".

Vue Docs: Привязка собственных событий к компонентам

...