Vue.JS value tied on input having the focus

vue.js onfocus
cambraca picture cambraca · Jan 11, 2017 · Viewed 85.3k times · Source

Is there a way to change a value in the model when an input gets/loses focus?

The use case here is a search input that shows results as you type, these should only show when the focus is on the search box.

Here's what I have so far:

<input type="search" v-model="query">
<div class="results-as-you-type" v-if="magic_flag"> ... </div>

And then,

new Vue({
  el: '#search_wrapper',
  data: {
    query: '',
    magic_flag: false
  }
});

The idea here is that magic_flag should turn to true when the search box has focus. I could do this manually (using jQuery, for example), but I want a pure Vue.JS solution.

Answer

cambraca picture cambraca · Jan 11, 2017

Apparently, this is as simple as doing a bit of code on event handlers.

<input 
  type="search" 
  v-model="query"
  @focus="magic_flag = true"
  @blur="magic_flag = false"
/>
<div class="results-as-you-type" v-if="magic_flag"> ... </div>

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?

Read More