Vue多表单组件实例自定义ID实现方案及可行性问询

首先直接给结论：你当前的写法不可行也不正确——虽然<Form id="form1"></Form>会让DOM中的<form>元素带上id="form1"，但你的submitForm方法里硬编码了$("#new_feedback_form")，这会导致所有表单提交时都只会选中第一个id为new_feedback_form的元素，完全无法区分不同实例。

正确的实现方式是让组件支持接收自定义ID作为props，然后在组件内部动态使用这个ID，具体步骤如下：

1. 改造Form.vue，支持接收自定义ID属性 #

修改组件的模板和脚本，让form的id动态绑定到传入的props值，同时设置默认值兼容原有逻辑：

<template>
  <!-- 用v-bind绑定formId属性 -->
  <form @submit.stop.prevent="onFeedbackFormSubmit(activity)" :id="formId">
    <div>
      <div class="textarea-container">
        <textarea 
          placeholder="Leave some feedback" 
          @keyup="onFeedbackFormSubmit(activity)" 
          v-model="feedback" 
          name="entry[feedback]"
        ></textarea>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  props: {
    // 定义接收的formId属性，指定类型和默认值
    formId: {
      type: String,
      default: 'new_feedback_form' // 保留原来的默认ID，兼容旧用法
    }
  },
  data() {
    return {
      feedback: ''
    }
  },
  methods: {
    onFeedbackFormSubmit(activity) {
      this.submitForm(activity);
    },
    submitForm(activity) {
      // 现在用组件实例的formId来选择对应的表单
      let $form = $(`#${this.formId}`);
      let data = $form.serialize();
      let path = `/portfolio/${activity.record.id}`;

      this.apiPatch({ data: data, path: path })
        .then(({ data }, status, xhr) => {
          this.$store.commit("current/OVERWRITE_RECORD", {
            type: "activity",
            childAttr: "feedback",
            data: data.feedback
          });
        })
        .catch(e => {
          this.generateError(e);
        });
    }
  }
}
</script>

2. 在Main.vue中正确传递自定义ID #

注意Vue的props命名规范：组件内用小驼峰formId，模板中要用短横线分隔的form-id来传递属性：

<Form form-id="form1"></Form>
<Form form-id="form2"></Form>

如果你的ID是动态变量（比如从数据中获取），可以用v-bind语法：

<Form :form-id="dynamicId1"></Form>
<Form :form-id="dynamicId2"></Form>

3. 额外优化：摆脱jQuery依赖（更推荐的Vue写法） #

其实你已经用v-model="feedback"绑定了textarea的值，完全不需要用jQuery去选中表单并serialize，直接用绑定的数据构造请求体即可，这样更符合Vue的响应式理念，也减少了对DOM的直接操作：

修改submitForm方法：

submitForm(activity) {
  // 直接用v-model绑定的feedback构造数据
  let data = {
    'entry[feedback]': this.feedback
  };
  let path = `/portfolio/${activity.record.id}`;

  this.apiPatch({ data: data, path: path })
    .then(({ data }, status, xhr) => {
      this.$store.commit("current/OVERWRITE_RECORD", {
        type: "activity",
        childAttr: "feedback",
        data: data.feedback
      });
    })
    .catch(e => {
      this.generateError(e);
    });
}

这样连form的ID都可以不用了，进一步简化组件逻辑，避免DOM选择器带来的潜在问题。

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