To give the input focus immediately after the page loads, we can call the focus() method from the mounted lifecycle hook of the Vue instance with the input ref. Clicking the button sets focus on the custom input component. Now we can set focus on the custom input component when the button is clicked. Import CustomInput from './components/CustomInput.vue' For it to work, we’ll need to add a focus() method to the custom component that calls the focus() method of its root input element. Focus Set focus on custom input componentĬustom input components are useful for abstracting logic built around an input element and for reusing an input element styled in a particular way.įor custom components, calling focus() on its ref object will cause an error. So when the button is clicked, focusInput() is called and the input gains focus.
We set the focusInput() method as a handler for the click event of the Focus button. We then call the focus() method on this object to set focus on the input. Īfter doing this, we are able to access the $refs property of the Vue instance to access the object that represents the input element. Clicking the button sets focus on the input.įirst, we create a new Vue instance ref by setting the input ref prop to a value ( name).
0 kommentar(er)
