Question

我在一个页面上有两个相同的表单，我希望将它抽象为自己的组件。但是我需要为每个表单/组件设置不同的id，因为jquery获取textarea的值并且内容不同。这样做的正确方法是什么？我可以在创建组件的新实例时附加id吗？

Form.vue：

          <form
            @submit.stop.prevent="onFeedbackFormSubmit(activity)"
            id="new_feedback_form">
            <div>
              <div class="textarea-container">
                <textarea
                  placeholder="Leave some feedback"
                  @keyup="onFeedbackFormSubmit(activity)"
                  v-model="feedback"
                  name="entry[feedback]">
                </textarea>
              </div>
            </div>
          </form>

form.js：

  submitForm(activity) {
    let $form = $("#new_feedback_form");
    let data = $form.serialize();
    let path = `/portfolio/${activity.record.id}`;

    // api patch request
    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);
      });
  },

Main.vue：

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

这可能（或正确）吗？

Answer 1

在Vue document

中

虽然明确定义的道具是传递信息的首选对于子组件，组件库的作者不能总是如此预见可能使用其组件的背景。那是为什么组件可以接受任意属性，这些属性被添加到组件的根元素。

您不需要在Form.vue组件

中声明id属性

但是如果您想将id用作属性并引用为this.id，则应将id声明为道具

Form.vue

<form :id="id"> <!--  don't pass id here -->
</form>

<script>
export default {
  props: ['id'] // we need to declare id here
}
</script>

并在提交表单时

submitForm(activity) {
  let $form = $("#" + this.id);
}

并在Main.vue

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

Answer 2

你可以使用ref属性：

<form ref="form">
...
</form>

jQuery代码：

$(this.$refs.form).serialize();

但是，为什么不使用v-model来获取Vue中的值？

每个组件实例的唯一ID

2 个答案: