4

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.

Deniz
  • 1,435
  • 14
  • 29

2 Answers2

7

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>
Community
  • 1
  • 1
palaѕн
  • 72,112
  • 17
  • 116
  • 136
1

the "state" is not an attribute but a property, one of the properties in the child component which is expecting a boolean value which you are passing from you main vue file or referred to as "parent component"

The attribute being used here is "v-bind" or ":" in shorthand, then passing the property "state" hence ":state"

Karl L
  • 1,645
  • 1
  • 7
  • 11