Vue如何使用计算属性选择组件中的所有文本答案

【问题标题】：Vue how do you select all the text in a component with a computed propertyVue如何使用计算属性选择组件中的所有文本
【发布时间】：2020-07-27 11:03:18
【问题描述】：

我通常可以使用$event.target.select() 选择所有文本，但在这种情况下，我认为它会选择全部，然后用计算属性替换选择。计算完属性怎么全选？

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>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以使用 $nextTick 在计算属性完成后运行回调。

@focus='isInputActive = true; $nextTick(() => $event.target.select())'

【讨论】：