我正在使用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>