小编Jon*_*sot的帖子

当您输入公式时，我试图在我的应用程序中重现类似于 Microsoft Excel / Google Sheets 的用户体验，并且您可以使用不同的公式和变量来自动完成下拉菜单。

为此，在验证自动完成功能后，我希望能够控制光标的位置。

例如，如果我输入=sum（变量1，变量2），则在变量2自动完成时，光标应该位于最后一个括号之前，而不是在最后。

我了解如何使用javascript设置光标的位置，问题是因为我同时修改输入的值并设置光标位置，后者不起作用。

我用更简单的上下文重现了问题： https ://jsfiddle.net/joparisot/j8ourfa1/31/

我的HTML：

<div id="app">
    <autocomplete v-model="selection"></autocomplete>
</div>

<template id="autocomplete">
  <div>
    <h2>gernerogrnio</h2>
    <input id="my-input" 
           class="form-control" 
           type="text" 
           :value="value"
           @keydown.enter="updateValue($event.target.value)">
    <p>{{ value }}</p>
  </div>
</template>

我的脚本：

    Vue.component('autocomplete', {
    template: '#autocomplete', 
  props: {
    value: {
      type: String,
      required: true
    }
  }, 
  methods: {
    updateValue (value) {
        var new_value = ''
      if (value.length < 4) {
        new_value = 'Inferior'
      } else {
        new_value = 'Superior'
      }

      this.$emit('input', new_value)
      var myInput = document.getElementById('my-input');
      this.setCaretPosition(myInput, …