未捕获的类型错误:无法设置未定义的属性(设置‘lastname’)-表单-Vue 3
2022-10-29
685
我的表单出现问题。每次我按下一个键在输入中添加一个字符时(我以姓氏为例,但每次输入都会出现相同的错误),都会出现此错误。
表单正在运行,但无论如何我想清除这些错误。我自己也尝试过,但不知道哪里出了问题。
以下是错误所指的代码部分:
const resetError = (field) => {
validationErrors.value.contactForm[field] = null;
};
const contactData = reactive({
lastname: null,
firstname: null,
email: null,
textarea: null,
});
const resetError = (field) => {
validationErrors.value.contactForm[field] = null;
};
const active = ref(false);
const loading = ref(false);
const submitContact = async (event) => {
try {
validationErrors.value["contactForm"] = {};
const isValid = await validateData(
"contactForm",
contactSchema,
contactData
);
if (!isValid) return;
loading.value = true;
await airtableStore.fetchAirtablePortfolio(contactData);
loading.value = false;
toggleModal(true);
event.target.reset();
} catch (error) {
console.error(error);
}
};
<form @submit.prevent="submitContact">
<form-input-molecule
label="Nom:"
id="lastname"
name="lastname"
v-model="contactData.lastname"
placeholder="Doe"
@input="resetError('lastname')"
:error-message="validationErrors.contactForm?.lastname"
></form-input-molecule>
<button-atom type="submit" :disabled="loading" :active="active"
>Envoyer</button-atom>
</form>
2个回答
我认为该问题可能与 contactData 的默认值有关。我会将它们设置为字符串。
const contactData = reactive({
lastname: '',
firstname: '',
email: '',
textarea: '',
});
否则,我无法从您的代码片段中看到它,但如果您使用 setup(),则需要返回 contactData 才能在模板中使用它。
Nikola Gava
2022-10-29
好的,我终于找到问题的根源了。
以下是我所做的更改:
const contactData = ref({
lastname: null,
firstname: null,
email: null,
textarea: null,
});
const resetError = (field) => {
if (validationErrors.value.contactForm?.[field]) {
validationErrors.value.contactForm[field] = null;
}
};
g4rf4z
2022-10-29