<div id="content">
  <my-component></my-component>
</div>


Vue.component('my-component', {  
  methods: {
    onSubmit1(event) {
      window.alert('onSubmit1')
    },
    onSubmit2(event) {
      window.alert('onSubmit2')
      event.preventDefault()
    }
  },
  
  template: `
    <div>
      <form @submit="onSubmit1" action="/" method="POST">
        <button type="submit">ボタン1 送信されます</button>
      </form>

      <form @submit.prevent="onSubmit1" action="/" method="POST">
        <button type="submit">ボタン2 送信されません(@submit.prevent)</button>
      </form>

      <form @submit="onSubmit2" action="/" method="POST">
        <button type="submit">ボタン3 送信されません(event.preventDefault())</button>
      </form>
    </div>
  `
})

new Vue({
  el: '#content'
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js