Vue-select: Red border for validation

[FrancescoMussi]

Hello.
Sorry if the issue has been raised several times already.

451, #447

But It doesn't seems to have been properly resolved.

I am not talking about a validation mechanism, but purely about the css required for having red borders.
Is there a class that can be applied to make the border of the select red?
Something like 'invalid', 'is-invalid' ?

Thanks.

[JasonHenson]

Yeah it would be nice to have a class or, in my case, proper Bootstrap support with correct classes being added to the input. I see examples using ".dropdown-toggle" to apply border color to manually, but to match Bootstrap's styling we need to be able to add box-shadow to inputs on focus.

[rinu]

I was able to add classes dynamically like you would add a class to any other element. On error case I added the invalid class and bootstrap made it have a red border. Pretty simple, doesn't require any special support from vue-select.

[Extrapolator214]

I encountered the same problem. In case someone needs it, my not-so-elegant solution:

<v-select v-model="transaction.account"
          :options="accountOptions"
          :class="selectClass('account')">
</v-select>

methods: {
      state: function (attribute) {
        if(this.validated){
          if(this.errorFor(attribute)){
            return false
          } else {
            return true
          }
        } else {
          return null
        }
      },
      selectClass: function (attribute) {
        let state = this.state(attribute)
        if ( state ) {
          return 'border rounded-lg border-success'
        } else if ( state === false) {
          return 'border rounded-lg border-danger'
        } else {
          return ''
        }
      }
}