Vue3中向textarea插入Emoji后ref变量message未更新的问题

问题原因 #

直接通过DOM元素修改textarea.value时，Vue的@input事件不会自动触发——该事件仅在用户手动输入或交互时触发，因此绑定的message变量无法同步更新。

解决方案 #

在修改完textarea.value后，手动触发input事件，让Vue感知到值的变化并同步到message变量。同时修正代码中的拼写错误，确保初始值绑定正常。

修改后的完整代码如下：

Template 部分

<EmojiPicker
      @select="onSelectEmoji"
/>
<textarea
  ref="refInputEnvioMensagem"
  @input="(v) => (message = v.target.value)"
  :value="message"
/>

注：原代码中:value="messsage"存在拼写错误，已修正为message

Script 部分

setup(){
  const message = ref('');
  const refInputEnvioMensagem = ref(null);

  function onSelectEmoji(emoji) {
    const tArea = refInputEnvioMensagem.value;
    if (!tArea || !emoji.i) return;
    
    tArea.focus();
    const startPos = tArea.selectionStart;
    const endPos = tArea.selectionEnd;
    const tmpStr = tArea.value || "";
    
    // 插入Emoji到textarea指定位置
    tArea.value = tmpStr.substring(0, startPos) + emoji.i + tmpStr.substring(endPos);
    
    // 手动触发input事件，同步值到message变量
    tArea.dispatchEvent(new Event('input'));
    
    // 可选：将光标定位到Emoji之后，优化交互体验
    const newCursorPos = startPos + emoji.i.length;
    tArea.selectionStart = tArea.selectionEnd = newCursorPos;
  }
  
  return { message, refInputEnvioMensagem, onSelectEmoji };
}

关键说明 #

• 手动触发input事件：通过dispatchEvent(new Event('input'))触发Vue的@input监听器，实现message与textarea值的同步。
• 拼写错误修正：原模板中绑定的messsage多了一个s，会导致初始值无法正确绑定，必须修正。
• 光标位置优化：插入Emoji后调整光标位置，避免光标跳转到输入框末尾，提升用户体验。

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