Antd Vue with useFieldArray via v-bind

[w20k]

Hey,

I'm trying to figure out how to connect an Ant Design Vue form with useFieldArray in a simple way. It seems like the errors are incorrectly stacked in an array. For example, even with useField, the errors are added more like a stack. I expected a structure where the logic would be something like arrayName[id].field, but instead, they’re just printed as an array. The second object is simply the length of the first array plus one, and when an error is removed, the array logic gets messed up. I still haven't figured out how it’s supposed to work.

Maybe someone has already solved this and could help me out—I’d really appreciate the assistance!

I've tried using :id with :for, and name with FormItem, but it doesn’t seem to work. :(

Don't think that I can somehow use defineField for array, and leave with ti 😄 If it's so - I'm dumb!

<div v-if="isTrackMeals">
  <h3>Menu</h3>
  <ACard v-for="(menu, index) in menuList" :key="menu.id" :body-style="cardBodyStyle" :style="cardStyle">
    <ARow :gutter="[15, 0]">
      <ACol :span="7">
        <AFormItem
          label="Label"
          :name="['menus', index, 'label']"
        >
          <AInput v-model:value="menu.value.label" placeholder="Enter menu label" />
        </AFormItem>
      </ACol>
      <ACol :span="7">
        <AFormItem
          label="Value"
          :name="['menus', index, 'value']"
        >
          <AInput v-model:value="menu.value.value" placeholder="Enter menu value" />
        </AFormItem>
      </ACol>
      <ACol :span="4">
        <AFormItem
          label="Limit"
          :name="['menus', index, 'limit']"
        >
          <AInputNumber v-model:value="menu.value.limit" :min="0" placeholder="Enter limit" />
        </AFormItem>
      </ACol>
      <ACol :span="4">
        <AButton danger style="margin: 30px 0 30px 60px" @click="removeMenu(index)">
          <template #icon>
            <VIcon name="trash" filled />
          </template>
        </AButton>
      </ACol>
    </ARow>
  </ACard>
  <AButton
    type="dashed" block
    @click="push({label: '', value: '', limit: 0})"
  >
    Add element
  </AButton>
</div>

Not the same issue, but just a noticed Antd Vue have a lag with vee-validate library, (email field, for example from the docs example):
https://vee-validate.logaretm.com/v4/examples/ui-libraries#ant-design