每个组件实例的唯一ID

时间:2018-05-28 22:21:45

标签: jquery vue.js vuejs2 vue-component

我在一个页面上有两个相同的表单,我希望将它抽象为自己的组件。但是我需要为每个表单/组件设置不同的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>

这可能(或正确)吗?

2 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分:2)

你可以使用ref属性:

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

jQuery代码:

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

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