【知识整理】vue中文本框获取焦点时，光标出现在文本末尾

最近遇到一个问题，点击编辑，才能修改一个文本框的内容，文本框自动获取光标，但是光标总是出现在文本框最前面，百度以后，可以参考文本框获取焦点时，光标出现在文本末尾

下面贴上我在vue中的代码：

<vi-input
  v-model="taskName"
  id="task-edit"
></vi-input>
<vi-icon type="edit" title="编辑" @click.stop="editTask()"></vi-icon>

editTask() {
  // input框聚焦
  this.$nextTick(() => {
    const length = this.taskName.length;
    const editTask = document.getElementById("task-edit");
    editTask.focus();
    editTask.selectionStart = length;
    editTask.selectionEnd = length;
  });
},

‘selectionStart’ 表示输入性元素selection起点的位置，‘selectionEnd’ 表示输入性元素selection末点的位置，都是 DOM 属性。