CODEWITHSUNDEEP
javascriptvue.js
nowox
nowox

Reputation: 29166

How to access a prop inside a v-for?

When a prop has the same name as a sub-element in a v-for directive. How to access it?

<template>
    <ul>
        <li v-for="{ id, name } in data" :key="id">
           {{name}} and {{props.name}} // Doesn't work, and props name is shadowed here.
        </li>
    </ul>
</template>
<script setup lang="ts">
const props = defineProps({ data: Array, name: String });
</script>

Upvotes: 0

Views: 45

Answers (1)

Andr&#233; Al&#231;ada Padez
Andr&#233; Al&#231;ada Padez

Reputation: 11628

Don't destructure it:

<template>
    <ul>
        <li v-for="item in data" :key="item.id">
           {{ item.name }}
        </li>
    </ul>
</template>

Upvotes: 2

Related Questions