Vue :state, what is this?

Question

i was using https://bootstrap-vue.org/docs/reference/validation#vuelidate and i came across with

:state as a vue attribute.

i didn't found anything in the docs and i am confused. where is it come from and what does it do? actually seems like i need to use this to validate a input field. but i'd rather would like to use @blur instead of state but its not working.

Answer 1

As mentioned in the docs:

state - Boolean - null

Controls the validation state appearance of the component. 'true' for valid, 'false' for invalid', or 'null' for no validation state

and to bind this property dynamically we can use v-bind directive like:

<b-form-select
   id="example-input-2"
   v-bind:state="validateState('food')"
></b-form-select>

or we can use the shorthand for v-bind:state which is just :state like:

<b-form-select
   id="example-input-2"
   :state="validateState('food')"
></b-form-select>