VUEJS Set autofocus to ALL user inputs when component is created - vuejs2

Question

I need to focus all the form user inputs onCreate(), so to make clear to the user that he can edit the fields if he needs to.
The closer thing I found is something like:
<input ref="email" />
const input = this.$refs.email
methods: {
focusInput() {
this.$refs.email.focus();
}
That should work, but I was looking for a better way to do it, without applying the ref attribute to every single input.
Is there a way to wrap them all at once?
I tried attaching the ref to the form <b-form ref="focusInputs">, then, in the method, access the inputs through it
focusInputs() {
this.$refs.focusInputs.input.focus();
}
and call it in created:
created(){
this.focusInputs()
}
But in the console I got:
Error in created hook: "TypeError: Cannot read property 'input' of undefined"
I think that's because I am using bootstrap-vue, so the input tags are <b-form> and <b-form-input> (instead of just <form> and <input>). CSS and Javascript, as far as I know, are not able to access these tags as the can with form or input.
So, do you think is there still a way to wrap them all, or do I need to mark them singularly (either with a class or with ref).
Anyone know?
Thank you,
x

Answer 1

You can create a css class that will apply the bootstrap textbox highlight color to any textboxes you want. The below CSS should do the trick. You can find this CSS in the bootstrap files, I just changed the name and removed the focus requirement.
You cannot however actually "Focus" multiple fields since focus is where the input cursor is set. You can only auto focus one field at a time.
.fillable{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}