VueJS 3表单提交三元表达式失效问题求助

方案1：统一提交处理方法 #

在组件中新增一个中间方法，内部根据isEditMode判断执行对应逻辑：

// 组件script部分
methods: {
  handleSubmit() {
    this.isEditMode ? this.handleEditRole() : this.handleAddRole()
  },
  handleAddRole() {
    // 你的添加角色逻辑
  },
  handleEditRole() {
    // 你的编辑角色逻辑
  }
}

模板中绑定这个统一方法：

<form @submit.prevent="handleSubmit">
  <!-- 表单内容 -->
</form>

这种写法更直观，也避免了模板中复杂表达式的解析问题。

方案2：修正模板绑定写法 #

如果要在模板中直接用三元表达式，给方法加上调用括号即可：

<form @submit.prevent="isEditMode ? handleEditRole() : handleAddRole()">

问题原因 #

直接写isEditMode? handleEditRole : handleAddRole时，返回的是函数引用，但Vue处理这种动态函数引用时，无法自动绑定组件实例的this上下文，导致方法执行异常；而单独绑定方法名时，Vue会自动处理上下文绑定，因此能正常工作。

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