Sometimes, we want to show element when input has focus with Vue.js.

In this article, we’ll look at how to show element when input has focus with Vue.js.

How to show element when input has focus with Vue.js?

To show element when input has focus with Vue.js, we can add a flag that’s updated when we focus on and away from the input.

For instance, we write

<template>
  <div id="app">
    <input
      type="search"
      v-model="query"
      @focus="showDiv = true"
      @blur="showDiv = false"
    />
    <div v-if="showDiv">...</div>
  </div>
</template>

to add the showDiv flag and set it to true when we focus on the input with @focus="showDiv = true".

Likewise, we set showDiv to false when we focus away from the input with @blur="showDiv = false".

Then we showDiv to control when the div below the input is shown with v-if="showDiv".

Conclusion

To show element when input has focus with Vue.js, we can add a flag that’s updated when we focus on and away from the input.