useFieldArray only works with deconstruct

[expliArturSmolen]

Good day to all,

can someone explain me why useFieldArray only works correctly when I deconstruct it?

Template:

        // For the working example I use "fields" instead of fieldArray.fields.
        // Nothing more, nothing less
        <div v-for="(field, idx) in fieldArray.fields" 
             class="d-flex justify-content-between align-items-center">
            <div>
                <FormControl :id="`${props.type}[${idx}].name`"></FormControl>
            </div>
            <div>
                <Checkbox :id="`${props.type}[${idx}].value`"></Checkbox>
            </div>
        </div>

Working:

const form = useForm({initialValues: {[props.type]: getInitialFormValues()}});
const {fields, push} = useFieldArray(props.type)

Not working:

const form = useForm({initialValues: {[props.type]: getInitialFormValues()}});
const fieldArray = useFieldArray(props.type)

Thank you in advance!

[logaretm]

This is a setup caveat, not a vee-validate issue. Because setup doesn't unwrap refs recursively, so you either need to do that yourself like:

<!-- fields is a ref, so you need to unwrap it -->
<div v-for="(field, idx) in fieldArray.fields.value" >

or You can also wrap useFieldArray with reactive which is mentioned by Vue docs. Note that you cannot destruct it if you use this approach.

import {  useFieldArray } from "vee-validate";
import { reactive } from 'vue';

const fieldArray = reactive(useFieldArray('users'));

I will add a quick note to the docs about this.