开发者问题收集

未捕获的类型错误:无法设置未定义的属性(设置‘lastname’)-表单-Vue 3

2022-10-29
685

我的表单出现问题。每次我按下一个键在输入中添加一个字符时(我以姓氏为例,但每次输入都会出现相同的错误),都会出现此错误。

Vue warn

Uncaught TypeError

表单正在运行,但无论如何我想清除这些错误。我自己也尝试过,但不知道哪里出了问题。

以下是错误所指的代码部分:

    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