Vue/uni-app中如何获取表单formId？获取元素返回undefined求助

看起来你在uni-app里尝试获取formId用于模板消息推送，但遇到了$refs和v-el都拿不到元素的问题，我来帮你梳理下问题所在和解决方案：

问题分析 #

1. v-el是过时的语法：你用的是Vue 2.x（从组件注册方式能判断），v-el是Vue 1.x的写法，早已被废弃，所以this.$els.elForm必然返回undefined。
2. $refs的误区与formId的获取逻辑：
   • uni-app中的<form>是框架封装的组件，用$refs拿到的是组件实例而非原生DOM；
   • 更关键的是：formId不是通过获取表单元素来提取的，它会在表单的submit事件回调参数中返回，而且必须通过form-type="submit"的按钮触发提交才能生成。

正确的实现步骤 #

1. 修改模板中的表单与按钮 #

调整form和按钮的写法，确保用form-type="submit"触发提交，并监听form的submit事件：

<form ref="myForm" report-submit="true" @submit="onFormSubmit">
  <view>
    <!-- 必须用form-type="submit"的按钮，才能触发表单提交并生成formId -->
    <button form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
  </view>
</form>

2. 实现submit回调获取formId #

在submit事件的参数中直接提取formId，无需手动获取表单元素：

methods: {
  onFormSubmit(e) {
    // 从事件参数中拿到formId
    const formId = e.detail.formId;
    console.log("获取到的formId:", formId);
    
    // 这里就可以将formId传入模板消息推送的逻辑中
    // this.sendTemplate(formId);
  },
  // 如果需要手动触发表单提交，也可以调用组件的submit方法：
  // manualSubmit() {
  //   this.$refs.myForm.submit();
  // }
}

3. 关键注意事项 #

• formId的生效条件：仅在微信小程序环境下，用户主动点击form-type="submit"按钮时才会生成真实formId；开发者工具中拿到的是模拟值the formId is a mock one，真机测试才能获取有效formId。
• 普通点击按钮无效：之前的@click="submit()"按钮不会触发表单的submit事件，自然无法生成formId，这也是你拿不到目标值的核心原因之一。

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