Выбор текста в текстовом поле с помощью Vuetify - PullRequest
Новая
       12

Выбор текста в текстовом поле с помощью Vuetify

2 голосов
/ 16 июня 2020

Я пытаюсь динамически установить значение текстового поля в 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>

1 Ответ

2 голосов
/ 16 июня 2020

Проблема в том, что this.$refs.input не является базовым элементом ввода HTML. Чтобы получить элемент ввода, сделайте что-то вроде ... 

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

Кроме того, установка значения this.input с последующей немедленной попыткой focus() и select() не сработает. Вам нужно будет использовать nextTick или setTimeout перед попыткой select(). Например: 

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

Демо

...