时间戳

首页 > 解决方案 > Vue如何使用计算属性选择组件中的所有文本

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

问题描述

我通常可以选择所有文本，$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>

标签： javascriptvue.js

解决方案

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

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

推荐阅读