'vee-validate's useFieldArray only works with deconstruct

Good day to all,

can someone explain me why vee-validates 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!

vue.jsvee-validate


Solution 1:[1]

I guess, you need wrap values to ref(), if you do not deconstruct object.

Try this

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

change to

import { ref } from 'vue';

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

(for vue >= 3)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nikita K.

Related Questions