Vue.js更新绑定属性后文本框焦点无法转移问题求助

我来帮你拆解下这个问题的核心原因，以及对应的解决办法～

为什么用this.input赋值时焦点无法转移？ #

Vue的响应式更新是异步的：当你修改this.input后，Vue不会立刻更新textarea的DOM内容，而是会把这个更新任务放到异步队列中等待执行。这时候你立刻调用document.getElementById("test").focus()，虽然代码执行了，但后续Vue更新textarea DOM的操作可能会重新夺回焦点，导致看起来焦点还在textarea上。

另外还要注意你代码里的一个小错误：document.GetElementById应该是document.getElementById（G要小写），这个错误会导致无法获取到目标元素，focus操作自然也不会生效。

而直接修改target.value是同步操作DOM，没有异步延迟，所以焦点转移能正常生效。

解决方案1：用$nextTick等待DOM更新完成 #

利用Vue的$nextTick方法，它会在Vue完成DOM更新后执行回调函数，这样就能确保焦点转移在textarea更新完成后执行：

signalChange(evt) { 
  let target = evt.target; 
  let start = evt.target.selectionStart; 
  let key = evt.key; 
  if (key === "@") { 
    evt.preventDefault(); 
    // 拼接新的文本内容
    const newText = target.value.slice(0, start) + "()" + target.value.slice(start);
    this.input = newText;
    // 等待Vue更新完DOM后再转移焦点
    this.$nextTick(() => {
      document.getElementById("test").focus();
    });
  } 
}

解决方案2：直接操作DOM并同步触发input事件 #

如果你希望立刻看到效果，也可以先直接修改textarea的DOM值，再手动触发input事件让Vue同步更新this.input，这样既保持了双向绑定，又能让焦点转移立刻生效：

signalChange(evt) { 
  let target = evt.target; 
  let start = evt.target.selectionStart; 
  let key = evt.key; 
  if (key === "@") { 
    evt.preventDefault(); 
    const newText = target.value.slice(0, start) + "()" + target.value.slice(start);
    // 同步修改DOM值
    target.value = newText;
    // 手动触发input事件，让Vue更新this.input
    target.dispatchEvent(new Event('input'));
    // 立刻转移焦点
    document.getElementById("test").focus();
  } 
}

这两种方案都能解决你的问题，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者Joelty