Vue3中HTML内按钮点击事件无法触发的问题求助

问题分析 #

核心问题有两个：

1. 方法未暴露给模板：recaptcha方法定义在setup函数内部，但未在返回对象中暴露，导致模板无法访问该方法。
2. 模板与挂载点冲突：组件中template: '#newsletter-form'指向了挂载目标的DOM元素ID，Vue挂载时会尝试替换该元素内容，同时又要从该元素读取模板，引发逻辑冲突。

修复步骤 #

1. 暴露recaptcha方法给模板 #

修改newsletter-form.js中的setup函数，将recaptcha加入返回对象：

export default {
  setup () {
    const state = reactive({
      email: ''
    })
    const rules = {
      email: { required, email, maxLength }
    }

    const v$ = useVuelidate(rules, state)

    const recaptcha = async () => {
      const result = await v$.value.$validate()
      if (!result) {
        alert('sdfgsdg');
        return
      }
    }

    // 将recaptcha加入返回，让模板可以访问
    return { state, v$, recaptcha }
  },
  // 后续修改template配置，见步骤2
}

2. 修正模板配置（二选一） #

方案一：移除组件的template选项

若希望直接使用挂载元素内的HTML作为模板，删除组件中的template: '#newsletter-form'选项。Vue会自动将挂载目标（#newsletter-form）的innerHTML作为组件模板。

方案二：使用独立的<template>标签（更规范）

将HTML中的模板内容移到独立的<template>标签中，避免与挂载点冲突：
修改index.html：

<body>
  <!-- 独立模板标签 -->
  <template id="newsletter-template">
    <div class="input-group mb-3">
      <input type="text" class="form-control text-white bg-transparent" placeholder="Enter your email" v-model="state.email" />
      <div class="input-group-append">
        <button class="btn btn-primary rounded-top-right-0" type="button" id="button-addon2" @click="recaptcha">Subscribe</button>
      </div>
    </div>
  </template>
  <!-- 空的挂载点 -->
  <div id="newsletter-form"></div>

  <script type="module">
    import { createApp } from 'vue'
    import NewsletterForm from './newsletter-form.js'

    createApp(NewsletterForm).mount('#newsletter-form')
  </script>
</body>

然后修改newsletter-form.js的template选项：

export default {
  setup () { /* ... 原有代码 ... */ },
  template: '#newsletter-template' // 指向独立模板的ID
}

验证 #

完成修改后，点击按钮时recaptcha方法会被正常调用，表单验证逻辑也能执行。

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