Manual Focus about vue-pincode-input HOT 3 CLOSED

Dude, I cannot prepare some refs inside the component for use by the end user. Vue doesn't work that way. Refs are available within a single component level. Yes, of course, you can come up with all sorts of tricks with passing an object by reference, but this is a non-vue way. You need to use native JavaScript to access the cell. You can search for an element with the desired number order inside the wrapper and then focus on it, as native JavaScript can do.

const wrapper = this.$refs.pincode.$el;
const cells = wrapper.getElementsByClassName('vue-pincode-input');
      
cells[0].focus();

from vue-pincode-input.

You trying to focus the wrapper element. Try to get first cell element instead and apply focus to it.

from vue-pincode-input.

@Seokky The issue is that I don't declare any children elements.

<CodeInput v-if="adminDlg" v-model="adminPin" :length="4" secure />

This is the extent of my code and I let the component do the rest as far as the UI is concerned.
This is the breakdown of my elements and the component does not seem to generate dynamic refs for manual use so I'm not sure this is possible.

I would imagine it would work something like this example based on the number provided in the length prop
https://stackoverflow.com/questions/45563329/how-to-add-dynamic-ref-in-vue-js/45563531

So if each pin input generated had something like :ref="pin_input_${i}"
I could manually focus on this.$refs.pin_input_1.focus()

Edit

It appears you're already doing all that in the code but for whatever reason vue-pincode-input0 doesn't exist
this.$refs['vue-pincode-input0'].focus() results in an error because the ref is undefined.

from vue-pincode-input.