VueJS verhindern Standardaktion für benutzerdefinierte Ereignis

Question

Ich habe eine <btn> Komponente, die der folgenden Vorlage besteht:

<button @click="$emit('trigger')"> 
</button> 

Ich benutze die Komponente in meine Formen wie folgt aus:

<btn>Submit</btn> 

Jetzt Situationen gibt es wenn ich zwei Knöpfe im Formular haben muss. Einer von ihnen reicht das Formular ein und der andere nicht. Aber weil beide in meiner Form sind, reichen beide die Form ein. Ich kann nicht so etwas tun:

<btn>Submit</btn> <!-- This button should submit the form --> 
<btn @trigger="nextQuiz">Next</btn> <!-- This button should only execute the nextQuiz method --> 

Wie kann ich vue sagen Sie das Formular Vorlage nur zu verhindern, wenn die zweiten <btn> geklickt wird?

Answer 1

Stellen Sie type ein.

Vue.component("btn",{ 
    props:{ 
    submit: Boolean 
    }, 
    computed:{ 
    type() { return this.submit ? 'submit' : 'button' } 
    }, 
    template: ` 
    <button :type="type" @click="$emit('trigger')"><slot></slot></button> 
    ` 
}) 

gebraucht wie:

<form action=""> 
    <btn submit>Submit</btn> 
    <btn>Don't Submit</btn> 
</form> 

Hier ist ein Beispiel.

console.clear() 
 

 
Vue.component("btn",{ 
 
    props:{ 
 
    submit: Boolean 
 
    }, 
 
    computed:{ 
 
    type() { return this.submit ? 'submit' : 'button' } 
 
    }, 
 
    template: ` 
 
    <button :type="type" @click="$emit('trigger')"><slot></slot></button> 
 
    ` 
 
}) 
 

 
new Vue({ 
 
    el: "#app" 
 
})

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <form action=""> 
 
    <btn submit>Submit</btn> 
 
    <btn>Don't Submit</btn> 
 
    </form> 
 
</div>

@thanksd hatte eine ähnliche andere Idee, die ich hatte. Sie können auch den prevent-Modifikator verwenden.

Vue.component("btn",{ 
    props:{ 
    submit: Boolean 
    }, 
    template: ` 
    <button v-if="submit" @click="$emit('trigger')"><slot></slot></button> 
    <button v-else="submit" @click.prevent="$emit('trigger')"><slot></slot></button> 
    ` 
}) 

Answer 2

Sie inline angeben könnte das Standardverhalten des nativen Click-Ereignis über @click.native.prevent zu verhindern:

Vue.component('btn', { 
 
    template:` 
 
    <button @click="$emit('trigger')"> 
 
     <slot/> 
 
    </button> 
 
    ` 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    nextQuiz() { 
 
     console.log('nextQuiz') 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <form action=""> 
 
    <input name="bar"> 
 
    <btn>Submit</btn> 
 
    <btn @click.native.prevent @trigger="nextQuiz">Next</btn> 
 
    </form> 
 
</div>