title: Vue JS: TypeError: Cannot read property 'preventDefault' of undefined
body: <p>I have used v-model in my input field but it gives error of preventDefault of undefined. What am I missing here?</p>
  <p>I have following code on my AddUser component.</p>
  <pre><code>&lt;template&gt;
      &lt;form @submit=&quot;onSubmit()&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;input type=&quot;text&quot; v-model=&quot;name&quot; name=&quot;name&quot; class=&quot;form-control&quot; placeholder=&quot;Enter name&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-btn form-group text-center&quot;&gt;
              &lt;Button type=&quot;submit&quot; text=&quot;Add&quot; color=&quot;#2BA0A3&quot; /&gt;
          &lt;/div&gt;        
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Button from './Button'
  export default {
      name: 'AddUser',
      data(){
          return {
              name: ''
          }
      },
      components: {
          Button
      },
      methods: {
          onSubmit(e){ 
              e.preventDefault()
              if(!this.name){
                  alert('Please enter name.')
              }
          }
      }
  }
  &lt;/script&gt;
  </code></pre>