Writing a Custom Conditional Vue Directive
Moritz Lang
501

I changed this directive in order to focus a input/textarea which is located somewhere inside a component. (The component I use is a custom input provided by some UI library)

const VALID_SELECTORS = [ `textarea`, `input` ]

Vue.directive(`focus-input`, {
componentUpdated(el, binding) {
if (!binding.value) return
if
(VALID_SELECTORS.some(selector => el.matches(selector))) {
el.focus()
return
}
const child = el.querySelector(VALID_SELECTORS.join(`, `))
if (child) child.focus()
}
}
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.