要素を参照する方法 ($refs) [Vue.js]

$refs

参考：

子コンポーネントインスタンスと子要素へのアクセス | Vue.js [公式]

そうか、要素に触るなら $refs と mounted を組み合わせれば良いのか。| Ginpen.com

vm.$refs | Vue.js [公式]

ref | Vue.js [公式]

v-for で ref を使うと $refs での参照が配列になる

参考：

子コンポーネントインスタンスと子要素へのアクセス | Vue.js [公式]

VueJs getting an element within a component – Stack Overflow

$refs はリアクティブではない

$refs are only populated after the component has been rendered, and it is not reactive.

── Accessing Child Component Instances & Child Elements

Solution

for the example @Kingwl https://jsfiddle.net/z11fe07p/773/, i found a solution https://jsfiddle.net/Fmajor/cuay7v1j/2/

just manually clear the old ref array to null, and it works

── Fmajor commented on 21 Sep 2017

this.$nextTick

For the problem of $refs not being reactive, I’m using this.$nextTick(function () { }) and it works, I get an updated list of $refs.

── feliperaul commented on 21 Sep 2017

Correct approach to get the correct index

The correct approach to get the correct index is just as @adamawang proposed:
Bind index to dom as :data-index=”index” and then access it via parseInt(el.dataset.index) when using $refs

── fnlctrl commented on 25 Jul 2018

参考：

v-for, refs and access to refs.<array of components> by array index after Array.unshift · Issue #4952 · vuejs/vue – GitHub

feliperaul commented on 21 Sep 2017 – v-for, refs and access to refs.<array of components> by array index after Array.unshift · Issue #4952 · vuejs/vue – GitHub

Fmajor commented on 21 Sep 2017 – v-for, refs and access to refs. by array index after Array.unshift · Issue #4952 · vuejs/vue – GitHub

alekzonder/1zcLkuwq – JSFiddle

a simple version – JSFiddle

i found a solution – JSFiddle

$refs should be reactive to be able to use them in computed properties · Issue #3842 · vuejs/vue – GitHub