v-for, refs and access to refs.<array of components> by array index after Array.unshift

[alekzonder]

here example: https://jsfiddle.net/alekzonder/1zcLkuwq/
vue.js 2.1.10

steps in example:

1. press "unshift new" button
2. then press "set bold" with 0 index in input

problem: item with index 1 is bold after Array.unshift in data

if remove :key=item.id in template with v-for, all works right

bug or feature?

[Kingwl]

https://jsfiddle.net/z11fe07p/773/
a simple version
looks like a bug but i have no idea to fix that
the problem is https://github.com/vuejs/vue/blob/dev/src/core/vdom/modules/ref.js#L21
only push the new ref to refs

[alekzonder]

@Kingwl thanks for simple version!

i can iterate $refs.items and search component by data, but not sure this right way

[yyx990803]

Note that v-for refs do not guarantee the same order as your source Array.

In the next release you can determine how to register refs yourself by passing a function to :ref.

[ixcat]

Sorry to respond to a closed issue -

Is the list behavior documented anywhere?

I did not see in for example:

https://vuejs.org/v2/guide/list.html#key
https://vuejs.org/v2/guide/migration.html#v-for-Argument-Order-for-Objects-changed

Seems to snag others, occasionally, as seen here and in:
https://forum-archive.vuejs.org/topic/5190/this-refs-ref_name-on-dynamic-component-is-array-instead-of-vuecomponent/3

seems a quick note might be beneficial to save headaches..

thanks for a great framework either way :)

[feliperaul]

"Note that v-for refs do not guarantee the same order as your source Array"

Well this is a huge bummer.

[Fmajor]

In the document https://vuejs.org/v2/guide/components.html#Child-Component-Refs, it says

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

But i really have the requirement for a dynamic ref in v-for

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
==========after other tries============
i found that vue only push new added vue components in the ref array in the v-for loop, so in my solution, the its array will only have one item, problem not solved.
we need to wait the new ":ref" feature from @yyx990803

[feliperaul]

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

But for the problem of v-for $refs returning an array that does NOT match the order of your source data, I had to code a hack using custom uids, and resetting those uids (0 indexed) just before trying to access $refs, and then filtering that array by that uid property.

[adamwathan]

Anyone come up with a solution they think is clean for this yet? It’s currently really hard to answer questions like “what is the bounding box of the element where item x in this array is being rendered?” since the refs array order is not synchronized with the data source order.

Best I’ve come up with is assigning a different unique ref name for each item in the list like :ref=“‘option:’ + item.id” but that’s really gross, especially considering I have to access that ref as element 0 of an array with only one item in it now since the ref is on a v-for.

Other solution I had was adding a :data-key=“...” attribute so I can find the ref I want by traversing all of them and looking for a match but man does it ever feel anti-Vue to be storing data in the DOM like that.

@yyx990803
Is there any update on this?

[trollfred]

fuck that was painful

[HaykoKoryun]

An approach we just took is to give a _dirty property to each element in the array and bind that as the key à la: :key="item._dirty". The _dirty property is a pseudo random string e.g. `${Date.now()}:${Math.random()}`and it gets regenerated for each element when the $refs array order needs to be synchronised with the underlying data array order.

[zijjj]

@yyx990803
如果更新后的refs数组与源数据数组的顺序不一致，那么这个refs数组还有什么意义呢？
数组元素我们只能通过索引来查找，但是这时候顺序又不一致，那这不算是一个BUG吗？