Vue点击按钮提示“Invalid handler for event 'click': got undefined”求助

1. 修复核心语法错误 #

你的saveUserData方法里，调用this.api.uploadFile时参数格式错误——formData和第三个参数'journals/v1/'之间缺少逗号，这会导致JavaScript解析失败，函数无法被组件正常识别，这就是触发"click handler undefined"错误的核心原因。

错误代码：

this.api.uploadFile('editorial/'+store.state.journalId+'/editorialimage',formData'journals/v1/')

修复后：

this.api.uploadFile('editorial/'+store.state.journalId+'/editorialimage', formData, 'journals/v1/')

2. 处理RouterLink与按钮的事件冲突 #

你将base-button嵌套在router-link内部，点击按钮时会同时触发路由跳转和数据提交逻辑，可能导致数据还未上传完成就跳转到新页面，甚至干扰事件触发。推荐两种调整方案：

方案A：移除RouterLink，完成提交后手动跳转 #

去掉router-link包裹，在saveUserData的成功回调里通过$router.push实现跳转：

<template>
  <div class="col offset-2">
    <base-button type="info" @click="saveUserData">Save</base-button>
  </div>
</template>

<script>
// ...其他代码
methods: {
  saveUserData: function () {
    let formData = new FormData()
    formData.append('logoURL', this.userdetails.logoURL)
    this.api.uploadFile('editorial/'+store.state.journalId+'/editorialimage', formData, 'journals/v1/')
      .then((res) => {
        this.userdetails.journalId = store.state.journalId
        this.userdetails.imageId = res.data.status
        this.createNewMember()
        // 数据处理完成后执行跳转
        this.$router.push('editorial')
      }, (err) => {
        console.log(err)
      })
  }
}
</script>

方案B：阻止事件冒泡（仅保留RouterLink时使用） #

如果必须保留router-link，需要在按钮点击事件中阻止事件冒泡，避免触发路由跳转：

<template>
  <div class="col offset-2">
    <router-link to="editorial">
      <base-button type="info" @click="handleSave">Save</base-button>
    </router-link>
  </div>
</template>

<script>
// ...其他代码
methods: {
  handleSave(e) {
    // 阻止事件冒泡，避免触发router-link的跳转逻辑
    e.stopPropagation()
    this.saveUserData()
  },
  saveUserData: function () {
    // ...修复后的上传逻辑
  }
}
</script>

3. 确认BaseButton组件正确传递事件 #

如果BaseButton是自定义组件，需要确保它能将外部绑定的click事件转发到内部原生按钮上。BaseButton的实现应类似这样：

<!-- BaseButton.vue -->
<template>
  <button :type="type" v-on="$listeners">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: ['type']
}
</script>

使用v-on="$listeners"可以自动传递所有父组件绑定的事件到内部原生按钮，确保@click能正确触发父组件的方法。

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