Cant access field methods or props from ref

[gaby64]

I cant access field methods or meta from ref

I would like to be able to call resetField from a method.

[logaretm]

It's added in 9f96ef0 and should tagged in the next 4.5-alpha release or 4.5 full

the added methods are:

• setErrors
• setTouched
• reset
• validate
• handleChange

[gaby64]

could meta be also exposed?

[logaretm]

I don't think exposing state via $ref makes sense, so only methods will be exposed just like the Form component. As a workaround, you can use v-slot instead or go with the composition API.

[gaby64]

is there a performance cost to exposing it?

at the moment, im using the v-slot and passing meta as a function argument.
I dont see why accessing it from ref would be an issue, especially if I want to be able to use the state from a function not called by an event handler in the template.

I am not yet ready to go the composition API route.

[logaretm]

I dont see why accessing it from ref would be an issue

Because it would encourage using $refs more often which is not a good practice.

Another workaround you can use is to copy the code for the <Field /> component into your project and expose whatever you need and use that instead of vee-validate's <Field /> and it should work fine with the <Form /> component and other APIs.

[lk77]

@logaretm Is there a way to access valid states outside of template / component containing Form?

Submit is triggered programmatically, not via a submit button inside the form,
because form is displayed on a dialog component with already embedded buttons, i could include the buttons in my form but i prefer to let the dialog component handle that for me.

I need to pass the meta.valid to the parent dialog component

i don't see a way to do that for now, i could call validate(), but this will trigger validation visually, and display errors to the users.

for now i'm doing that :

<Form v-slot="{ meta }">
    <input v-bind="meta" type="hidden" ref="meta">
</Form>

methods: {
    isValid() {
        return this.$refs.meta.getAttribute('valid')
    }
}

that's not clean at all but i have no choice

[ghost]

@logaretm What do you think about implementing the composable in such a way as to play friendly with the <Form> component? A valid use case would be attaching form actions to an external action bar without too much headache.

<Form name="myForm">
const { meta } = useForm({ name: "myForm" })