Vue.js v-model绑定问题：submit事件中password值为undefined

你的问题核心在于**methods里用箭头函数定义了submit方法**。箭头函数不会绑定自身的this，它的this是继承自定义时的外层作用域，而非Vue组件实例。所以当你在箭头函数里访问this.password时，this根本不是指向你的Vue组件实例，自然拿不到data里定义的password值，结果就会是undefined。

把submit方法改成普通函数形式，Vue会自动将组件实例绑定到方法的this上，这样就能正常访问data里的属性了：

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      password: ''
    }
  },
  methods: {
    submit() { // 替换箭头函数为普通函数
      console.log('submitted')
      console.log(this.password) // now this指向Vue实例，能拿到正确值
    }
  }
}
</script>

另外，模板里的v-on:click可以用Vue的语法糖简化成@click，写法更简洁：

<button @click="submit">Submit</button>

Vue官方文档明确提醒：不要在options属性（比如methods、computed、watch）或回调上使用箭头函数，因为箭头函数没有独立的this上下文，会导致无法访问Vue实例的属性和方法。

内容的提问来源于stack exchange，提问作者gv1507