CODEWITHSUNDEEP
vuejs2
gv1507
gv1507

Reputation: 47

Vue.js v-model binding issue

I am trying to access the input in the submit event. The value of password is undefined.

<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <input type="text" v-model="password">
    <button v-on:click="submit()">Submit</button>
  </div>
</template>

The following is the script.

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      password: ''
    }
  },
  methods: {
    submit: () => {
      console.log('submitted')
      console.log(this.password)
    }
  }
}
</script>

this.password is undefined, when I try to log to console.

Upvotes: 0

Views: 982

Answers (1)

Bsalex
Bsalex

Reputation: 2970

You should use a regular function instead of fat-arrow function in methods.
For example:

 methods: {
     submit() {
         console.log('submitted')
         console.log(this.password)
     }
 }

or

 methods: {
     submit: function() {
         console.log('submitted')
         console.log(this.password)
     }
 }

See explanation here: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Upvotes: 2

Related Questions