Question

我正在使用hey ui中的表单组件在VueJS中构建表单。每个字段的值都是在emailjs-模板处理模板的同时提交的。 {{name}} {{email}}。所有这些都可以与同一个库中的输入字段一起很好地工作，但是我不明白为什么DatePicker在浏览器中可以正常工作时拒绝显示在模板中（与所有其他字段一样）。

总结：

测试时，所有输入均按预期工作。表单组件是被动的，我可以通过Vuejs-devtools看到更改。
已在emailjs上正确配置了模板。我收到所有字段值，但没有DatePicker值。
导入自定义日期选择器组件完全没有问题。为什么会这样？

如何像获取该库中所有其他组件的值一样获取datepicker的值？

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.0/dist/email.min.js">
  </script>
  <script type="text/javascript">
    (function () {
      emailjs.init('<my_userid>');
    })();
  </script>
  <script type="text/javascript">
    window.onload = function () {
      document.getElementById('save2go').addEventListener('submit', function (
        event) {
        event.preventDefault();

        emailjs.sendForm('default_service', 'jstemplate', this);
      });
    }
  </script>

export default {
  name: "SendForm",
  data() {
    return {
      form: {
        name: null,
        firstName: null,
        lastName: null,
        email: null,
        phone: null,
        number: null,
        address: null,
        dob: null,
        idtype: null,
        idnumber: null
      },
      required: ["dateData"]
    };
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ValidationObserver
      name="save2go"
      ref="observer"
      v-slot="{ invalid }"
      tag="form"
      @submit.prevent="submit()"
    >
      <form id="save2go" name="save2go">
      
              <ValidationProvider name="name" rules="required" v-slot="{ errors }">
          <label for="name" class="formLabel block mb-6">
            Full Name
            <input
              placeholder="Lois Wilson"
              name="name"
              v-model="form.name"
              type="text"
              autofocus
              class="w-full mt-2"
            />

            <span class="text-sm block text-red-500 mt-2">{{ errors[0] }}</span>
          </label>
        </ValidationProvider>
       
                  <ValidationProvider name="dob" rules="required" v-slot="{ errors }">
            <label for="dob" class="formLabel block mb-6">
              Birth Date
              <DatePicker name="dob" v-model="form.dob" class="w-full mt-2" />
              <span class="text-sm block text-red-500 mt-2">{{ errors[0] }}</span>
            </label>
          </ValidationProvider>
                  <Button
          :disabled="invalid"
          color="primary"
          type="submit"
          class="w-full py-4 my-4 font-bold"
        >SUBMIT</Button>
      </form>
    </ValidationObserver>

如何使用emailjs发送vuejs datepicker componenet的值

0 个答案: