Home / Snippets / Vue Js Auto Focus Directive
Vue Js Auto Focus Directive cover

Vue Js Auto Focus Directive

358

3 years ago

0 comments

Vue Js allow you to define a custom directive that can be used to make code reusable in components. To automatically set focus on input in Vue Js you can define the following custom directive. How this work is that the element will autofocus using the native Java Script "focus()" method behind the scene.
<template>
  <input
    v-auto-focus
    type="email"
    placeholder="Your full name"
  >
</template>

<script>
Vue.directive('auto-focus', {
  inserted: el => el.focus()
})
</script>
notion avatar

Alaz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this