Vue.js v-model 绑定问题

Question

我正在尝试访问提交事件中的输入。密码的值未定义。

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

以下是脚本。

<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 未定义，当我尝试登录控制台时。

Answer 1

您应该在methods 中使用常规函数而不是粗箭头函数。
例如：

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

或

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

请看这里的解释：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks