Wie Click Ereignishandler zwischen Eltern und Kind Elemente in Vuejs zu isolieren

Question

Ich versuche Semantic-UI-Komponente zu konvertieren auf Vuejs anstelle von jQuery, aber ich weiß nicht, wie zu isolieren V-on: Klicken Sie zwischen Kind und es ist Elternelement.

In diesem Beispiel verwende ich v-on: Klicken Sie auf eine Schaltfläche, die Dropdown-Menü mit einer Toggle-Funktion zeigt, und es gibt eine andere v-on: Klicken Sie zum Löschen Symbol, das eine andere Funktion auslösen wird.

Das Problem ist, während ich auf das Löschen-Symbol klicke, wird das Dropdown-Menü angezeigt.

Wie kann ich dies verhindern?

`https://jsbin.com/minezij` 

Answer 1

können Sie stopEvent Modifiers verwenden, um die Ausbreitung des Ereignisses übergeordnete Elemente zu stoppen.

<!-- the click event's propagation will be stopped --> 
<a v-on:click.stop="doThis"></a>