vue.js - VueJS/Vuetify - 添加一些文本到文本区域的焦点位置

Question

我尝试通过按钮在 Vuetify textarea 中添加一些文本(标签)。

<v-btn small flat @click.stop="insertTag('{{title}}', <model-name-here>)">+ Title</v-btn>

insertTag 方法提供了这个:

this.$refs[model][0].focus()

我不知道如何将文本插入文本区域中的光标位置...

Answer 1

Kallan DAUTRICHE 的回答是正确的，但不是我所需要的(或者我认为 OP 所需要的)。

您必须设置元素的引用，以便您可以直接选择 DOM 的输入元素以获取/设置选择详细信息

模板:

<v-text-field v-model="model" ref="textField">

脚本:

export default Vue.extend({
    data: () => ({
        model: "",
    }),
    methods: {
        insertText(text) {

            // Get the input element by tag name, using the ref as a base for the search
            // This is more vue-friendly and plays nicer when you duplicate components
            const el = this.$refs.textField.querySelector("input");

            // Insert text into current position
            let cursorPos = el.selectionEnd; // Get current Position
            this.model =
                this.model.substring(0, cursorPos) +
                text +
                this.model.substring(cursorPos);

            // Get new cursor position
            cursorPos += text.length;

            // Wait until vue finishes rendering the new text and set the cursor position.
            this.$nextTick(() => el.setSelectionRange(cursorPos, cursorPos));

        }
    },
});