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

Refs inside v-for does not work when ref is used in setup #5448

Closed
likeswinds opened this issue Feb 18, 2022 · 1 comment
Closed

Refs inside v-for does not work when ref is used in setup #5448

likeswinds opened this issue Feb 18, 2022 · 1 comment

Comments

@likeswinds
Copy link

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

<template>
  <div id="app">
    <button ref="btn" @click="show">test</button>
    <div ref="itemRefs" v-for="item in list" :key="item">{{ item }}</div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
  name: "App",
  setup() {
    const list = ref(["a", "b", "c"]);
    const itemRefs = ref([]);
    const btn = ref();
    onMounted(() => {
      alert(itemRefs.value[0]);
      alert(btn.value.textContent);
    });
    return { list, itemRefs, btn };
  },
  methods: {
    show() {
      alert(this.$refs.itemRefs[0].textContent);
    },
  },
};
</script>

What is expected?

The contents of alter should be " a, b,c"

What is actually happening?

TypeError: Cannot read properties of undefined

@likeswinds
Copy link
Author

#5447

@github-actions github-actions bot locked and limited conversation to collaborators Oct 3, 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

1 participant