即使元素存在，Vue.js 中的“焦點不是函數”

Question

我試圖專注於 Vue.js 中的 textarea，但出現以下錯誤：

TypeError: _this2.$refs[ref].focus is not a function

這是文本區域：

<textarea v-model="text[key].content" :ref="text[key].text_id" class="text-textarea" @focus="makeCurrent(key)" v-on:keyup="detectVariable(key, text[key].text_id)"></textarea>

這是我的代碼：

let ref = 'foobar';
console.log(this.$refs[ref]);
this.$refs[ref].focus();

console.log打印出正確的 textarea：

0: textarea.text-textarea

但是當我嘗試集中注意力時，我收到了上面提到的錯誤。 我完全不理解這種行為。 ref存在並指向正確的textarea （它是頁面上目前唯一的textarea ，以避免混淆）但focus不是它的函數嗎？

Answer 1

當在v-for循環中使用ref ，它的行為會有所不同，並且 ref 是循環內具有給定 ref 的元素/組件的數組。

例如，如果我有以下內容，其中鍵包含多個值，

<div v-for="key in keys">
    <textarea ref="textAreaInput">
</div>

要關注第一個，我會這樣做this.$refs['textAreaInput'][0].focus()