javascript - VueJS prevent default action on custom event - Stack Overflow

admin管理员组

文章数量:1289827

I have a <btn> ponent which consists of the following template:

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

I use the ponent in my forms like this:

<btn>Submit</btn>

Now there are situations when I need to have two buttons in the form. One of them submits the form, and the other does not. But because both of them are inside my form, they both submits the form. I cannot do something like this:

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

How can I tell vue to to prevent the form submission only when the second <btn> is clicked?

I have a <btn> ponent which consists of the following template:

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

I use the ponent in my forms like this:

<btn>Submit</btn>

Now there are situations when I need to have two buttons in the form. One of them submits the form, and the other does not. But because both of them are inside my form, they both submits the form. I cannot do something like this:

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

How can I tell vue to to prevent the form submission only when the second <btn> is clicked?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Oct 27, 2017 at 19:28 Bert 82.5k1717 gold badges203203 silver badges166166 bronze badges asked Oct 27, 2017 at 19:16 TanmayTanmay 3,1891010 gold badges5656 silver badges9090 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You could specify inline to prevent the default behavior of the native click event via @click.native.prevent:

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

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

<script src="https://cdnjs.cloudflare./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>

Set the type.

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

Used like:

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

Here is an example.

console.clear()

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

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

<script src="https://unpkg./[email protected]"></script>
<div id="app">
  <form action="">
    <btn submit>Submit</btn>
    <btn>Don't Submit</btn>
  </form>
</div>

@thanksd had a similar other idea to one I had. You could also use the prevent modifier.

Vue.ponent("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>
  `
})

The other answers provide alternative solutions i.e. how to make it so that you don't need to prevent the default action -- but to address the actual question of how to prevent the default action via a custom event...

You can pass the native click event through to your custom event using the special $event variable:

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

And then you can receive that event in your custom nextQuiz method and call preventDefault to prevent the native behaviour:

<btn @trigger="nextQuiz">Next</btn>

...

nextQuiz(e) {
    e.preventDefault();
}

As long as your root element is a button (which is in your case), you could also set the type to button, which will pass through to the button. <button type="button">Click</button> natively doesn't submit forms. In your case, <btn type="button">Click</btn> should not submit the form. This keeps your Vue code simpler.

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

See MDN on button type and the HTML Spec for buttons.

本文标签： javascriptVueJS prevent default action on custom eventStack Overflow