验证对象上没有显示错误

Question

在使用时

• 验证@4.5.6
• vue@3.2.26

我试图验证一个嵌套的对象，但是我在显示错误时遇到了问题。

我根据文档文档做了一个例子

但是当我尝试添加

:has-error="Boolean(formErrors.links?.twitter)"

当尝试显示弹出消息时出错

Property 'twitter' does not exist on type 'string'

组件脚本

<script setup lang="ts">
// imports...libs
// const { value: name } = useField('name')
// const { value: twitter } = useField('links.twitter');
// const { value: github } = useField('links.github');

const { values: fieldValues, errors: formErrors, handleSubmit } = useForm({
  initialValues: {
    name: '',
    links: {
      twitter: null,
      github: null,
    },
  },
  validationSchema: yup.object({
    name: yup.string().required(),
    links: yup.object({
      twitter: yup.string().required().nullable(),
      github: yup.string().required().nullable(),
    })
  })
})
const onSubmit = handleSubmit(values => {
  //some logic
});

const loading = ref(false)

</script>

组件HTML

<template>
  <form @submit="onSubmit">
    <Field v-slot="{ field, errors }" name="name" type="text">
      <VField label="name">
        <VControl icon="feather:edit-2" :has-error="Boolean(formErrors.name)">
          <input
            v-bind="field"
            class="input is-primary-focus"
            type="text"
            placeholder="imagesLtr"
            autocomplete="name"
          />
          <p v-if="errors" class="help is-danger">{{ formErrors.name }}</p>
        </VControl>
      </VField>
    </Field>
    <Field v-slot="{ field, errors }" name="links.twitter" type="text">
      {{ field }}
      <VField label="links.twitter">
        <VControl icon="feather:edit-2" :has-error="Boolean(formErrors.links?.twitter)">
          <input
            v-bind="field"
            class="input is-primary-focus"
            type="text"
            placeholder="Name"
            autocomplete="twitter"
          />
          <p v-if="errors" class="help is-danger">{{ formErrors.links?.twitter }}</p>
        </VControl>
      </VField>
    </Field>
    <button>Submit</button>
  </form>
</template>

Answer 1

你试过formErrors['links.twitter']吗？

这是使用合成api使用vee验证时访问嵌套对象中的错误的方式。

也许，能帮上忙