$refs

[xjh1230]

What problem does this feature solve?

why refs value changed from array(vue2) to single(vue3)

What does the proposed API look like?

why refs value changed from array(vue2) to single(vue3)

[dnlsndr]

What is your issue? Provide some more explaination or examples please?

[xjh1230]

in vue2 $refs.items is [li#1, li#2, li#3]

<div id="app">
    <ul>
        <li ref="items" v-for="item in items" :id="item" :key="item">{{item}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        items:[1,2,3]
    },
    mounted: function () {
        console.log(this.$refs.items) //[li#1, li#2, li#3]
    }
    })
</script>

in vue3 $refs.items is li#3

<div id="app">
    <ul >
        <li ref="items" v-for="item in items" :id="item" :key="item">{{item}}</li>
    </ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
        data() {
            return {
                items:[1,2,3]
            }
        },
        mounted: function () {
                console.log(this.$refs.items) // <li id="3"></li>
        }
    })
    app.mount('#app')
</script>

[RobbinBaauw]

See #1166