When using $event.target.select(), I usually can select all the text. However, in this scenario, it seems to be selecting everything and then replacing the selection with the computed property. How can I select all after the computed property has finished?
Vue.component('my-component', {
template: `
<div>
My Component
<input type="text" v-model="displayValue" @blur='isInputActive = false' @focus='isInputActive = true;$event.target.select()'></input>
</div>
`,
props:['value'],
data() {
return {
isInputActive: false
};
},
computed: {
displayValue: {
get: function() {
return (this.isInputActive) ? this.value : this.value.toUpperCase();
},
set: function(val) {
this.$emit('input', val);
},
}
},
})
new Vue({
el: '#app',
data() {
return {
test: "Test"
};
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-component v-model="test"></my-component>
</div>