Open FrancescoMussi opened 6 years ago
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.
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
.
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 ''
}
}
}
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.