Vue.js中textarea元素已存在但调用$refs对应元素的focus()时报错TypeError: focus is not a function

嘿，我懂你现在的困惑——明明ref指向了正确的textarea元素，为啥调用focus()就报错呢？其实问题出在Vue对v-for中ref的处理逻辑上！

问题根源 #

你是在v-for循环里绑定的:ref="text[key].text_id"，哪怕页面最终只渲染出一个textarea，Vue也会把这类ref存储为数组形式。你console.log输出的0: textarea.text-textarea就是最好的证明——这是一个只有单个元素的数组，而数组本身并没有focus()方法，直接调用自然会报错。

解决方案 #

只需要把数组里的真实DOM元素取出来再调用focus即可，这里给你两种常见处理方式：

1. 直接取数组第一个元素（适合确定只有一个元素的场景）
   修改你的操作代码：

   let ref = 'foobar';
   console.log(this.$refs[ref]); // 输出是数组
   this.$refs[ref][0].focus(); // 取数组第一个元素调用focus
   

2. 遍历数组处理（如果未来可能出现多个元素的场景）
   如果你不确定元素数量，可以遍历数组逐个处理：

   let ref = 'foobar';
   const elements = this.$refs[ref];
   if (elements && elements.length) {
     // 让第一个元素聚焦
     elements[0].focus();
     // 或者遍历所有元素：elements.forEach(el => el.focus());
   }
   

额外提醒 #

还要确保你是在DOM渲染完成后调用focus方法，比如把代码放在mounted钩子中，或者用this.$nextTick()包裹，避免DOM未就绪导致的问题：

this.$nextTick(() => {
  let ref = 'foobar';
  this.$refs[ref][0].focus();
});

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