vue.js - 使用 Vuetify 在 textField 中选择文本

Question

我正在尝试在 Vuetify 中动态设置文本字段的值，将其聚焦并选择其文本(以便用户能够在必要时快速重置该字段)。我得到的错误是“选择不是函数”。这适用于普通文本输入，但不适用于 Vuetify 文本字段。

<template>
    <vContainer>
        <vTextField
            ref="input"
            v-model="input"
        />
        <vBtn
            @click="test"
        >
            Select
        </vBtn>
    </vContainer>
</template>

<script>

export default {
    data: () => ({
        input: null,
    }),

    methods: {
        test() {
            this.input = 'test value';
            this.$refs.input.focus();
            // this.$refs.input.select(); -> TypeError: this.$refs.input.select is not a function
        },
    },
};

</script>

Answer 1

问题是 this.$refs.input 不是底层的 HTML 输入元素。要获取输入元素，请执行以下操作...

let inputEl = this.$refs.input.$el.querySelector('input')

此外，设置 this.input 值然后尝试立即 focus() 和 select() 将不起作用。在尝试 select() 之前，您需要使用 nextTick 或 setTimeout 。例如:

  test() {
        let inputEl = this.$refs.input.$el.querySelector('input')
        this.input = 'test value'
        setTimeout(()=>{
            inputEl.select()
        },200)
  },

Demo