Vue.js 2表单绑定报错：v-on:model期望函数值却获undefined

架构老林

2026-5-15

解决Vue.js 2表单绑定报错：v-on:model="form.email" expects a function value, got undefined

嘿，这个问题我太熟了！你遇到的报错核心原因是用错了表单绑定指令——Vue 2里实现表单输入和数据双向绑定的指令是v-model，而不是你写的@model。

为什么会报错？

@model是v-on:model的缩写，它的作用是绑定一个事件处理函数，Vue会期望你传入一个可执行的函数，但你这里给的是form.email这个变量，自然会提示“期望函数，得到undefined”。而v-model是Vue专门为表单输入设计的语法糖，它会自动帮你绑定value属性和input事件，实现数据和视图的双向同步。

修正后的代码

表单部分

把@model替换成v-model，同时给按钮加上.prevent修饰符阻止默认提交行为（比返回false更直观）：

<form id="registrationForm">
  <div class="form-group">
    <input type="email" name="email" id="email" v-model="form.email" placeholder="enter your email address">
  </div>
  <button @click.prevent="sendRegistration" type="submit" class="btn btn-primary btn-gradient submit">SEND</button>
</form>

脚本部分

脚本部分基本没问题，你可以加上日志验证绑定是否生效：

data: function() {
  return {
    form: {
      // 其他字段...
      email: '', 
      // 其他字段...
    }
  }
},
methods: {
  sendRegistration: function() {
    console.log('sending form', this.form.email); // 打印绑定的邮箱值，验证同步是否正常
  }
}