Mon projet commence avec Vuejs et Buefy.
Le composant a deux actions différentes clic: p>
p>
mais quand je clique sur voici mon composant: p> et à l'intérieur de mon composant, j'ai une liste déroulante (Utilisation du composant Buefy): P> <p>{{ data.projects }}</p>
<BDropdown aria-role="list">
<BButton
slot="trigger"
class="button"
type="is-text"
@click.prevent="actionTwo()"
>
<BIcon icon="dots-horizontal" />
</BButton>
<BDropdownItem aria-role="listitem">Update</BDropdownItem>
<BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>
stop code> li>
empêche code> li>
ul> p>
3 Réponses :
Cela se produit probablement à cause de l'événement bouillonnant. Lorsque vous cliquez sur l'élément déroulant, les bulles d'événement Cliquez sur la zone Cyan. Ce que vous devez faire est d'annuler le bouillonnement d'événement pour l'élément déroulant.
<BDropdown aria-role="list">
<BButton
slot="trigger"
class="button"
type="is-text"
@click="actionTwo($event)"
>
<BIcon icon="dots-horizontal" />
</BButton>
<BDropdownItem aria-role="listitem">Update</BDropdownItem>
<BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>
<script>
export default {
methods: {
actionTwo(e) {
e.cancelBubble = true
}
}
}
</script>
Merci, je vérifie une bouilloire d'événement et je trouve une solution
Vous pouvez utiliser le modificateur Comme la documentation indique: seul gestionnaire de déclencheur si event.target est l'élément lui-même auto .
i.e. pas d'un élément enfant
( source )
J'essaie d'appuyer auto mais seulement actiontwo () fonctionne
J'ai trouvé la solution. Le problème est venu à un événement spécifique à partir du composant déroulant (Buefy). Donc j'ai ajouté ici la solution: p> STOP code> modificateur à déclencheur de déclencheur de déclencheur et j'ai ajouté Empêcher code> dans mon composant. <BDropdown aria-role="list" @click.native.stop>
<BButton
slot="trigger"
class="button"
type="is-text"
>
<BIcon icon="dots-horizontal" />
</BButton>
<BDropdownItem aria-role="listitem">Update</BDropdownItem>
<BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>
Avez-vous essayé
@ click.stop = "actiontwo ()" ?Oui j'essaie avec
@ click.stop pour action 2 mais cet événement ne déclenche pas la liste déroulanteVoulez-vous appeler votre méthode lorsque le menu déroulant est ouvert?
Lorsque je clique sur Dropdown,
actiontwo () doit ouvrir le menu. Cependant, seul le premier@Click exécutoire. Donc je me sens comme si je ne peux pas mettre un deuxième événement à l'intérieur mon composantAvez-vous essayé @ click.elf = "actiontwo ()"?