Vue.JS value tied on input having the focus

Question

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

Answer 1

You can use a flat by determinate a special CSS class, for example this a simple snippet:

var vm = new Vue({
	el: '#app',
	data: {
		content: 'click to change content',
		flat_input_active: false
	},
	methods: {
		onFocus: function(event) {
	    	    event.target.select();
	    	    this.flat_input_active = true;
		},
		onBlur: function(event) {
	    	    this.flat_input_active = false;
		}
	},
	computed: {
		clazz: function() {
			var clzz = 'control-form';
			if (this.flat_input_active == false) {
				clzz += ' only-text';
			}
			return clzz;
		}
	}
});

#app {
  background: #EEE;
}
input.only-text { /* special css class */
  border: none;
  background: none;
}

Good luck