Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Template Refs inside v-for does not work with script setup #5488

Closed
BrettLargent opened this issue Feb 25, 2022 · 1 comment
Closed

Comments

@BrettLargent
Copy link

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Copy the following code block into a newly created App.vue (locally or in the stackblitz quickstart)

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";

const list = reactive(["foo", "bar"]);

const first = ref(null);
const itemRefs = ref([]);
const instance = getCurrentInstance();

onMounted(() => {
    console.log(first.value);
    console.log(instance.refs.first);
    list.push("fiz");
    nextTick(() => {
        console.log(itemRefs.value)
        console.log(instance.refs.itemRefs);
    });
});
</script>

<template>
    <ul>
        <li ref="first">first</li>
        <li v-for="item in list" ref="itemRefs">
            {{ item }}
        </li>
    </ul>
</template>

What is expected?

Accessing itemRefs.value should return an array of rendered li elements, the same instance.refs.itemRefs would.

What is actually happening?

Accessing itemRefs.value actually returns an empty Proxy object whose target is an empty array.


Copying the example code provided at the refs-inside-v-for composition api example locally or in stack blitz errors as explained. But attempting this inside the SFC Playground does work.

@LinusBorg
Copy link
Member

LinusBorg commented Feb 25, 2022

Duplicate of #5447

@LinusBorg LinusBorg marked this as a duplicate of #5447 Feb 25, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Oct 2, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants