CODEWITHSUNDEEP
vue.jsvee-validate
Artur Smolen
Artur Smolen

Reputation: 106

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!

Upvotes: 0

Views: 1875

Answers (1)

Nikita K.
Nikita K.

Reputation: 11

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)

Upvotes: 1

Related Questions