Hey there!
I'm trying to create a v-for loop with a component that has two different props
COMPONENT
<template>
<div class="bg-light rounded p-2 px-5">
<h5> {{ number }}</h5>
<h3>{{ item }}</h3>
</div>
</template>
<script>
export default {
name: 'CustomCard',
props: ['item', 'number']
}
</script>
V-FOR INSIDE ANOTHER COMPONENT
<template>
<div class="row m-auto">
<CustomCard
v-for="(card, index) in cards"
:key="index"
:item="card.item"
:number="card.number"
class="col m-3"/>
</div>
</template>
<script>
import CustomCard from './CustomCard.vue';
export default {
name: 'DashboardSection',
components: {
CustomCard
},
data () {
return {
cards: [
{ item: 'Impressions', number: '2.300' },
{ item: 'Clicks', number: '259' },
{ item: 'Conversions', number: '45' },
{ item: 'Cost', number: 'R$ 350,00' }
]
}
}
}
</script>
Can anyone help me figure out how to include the card number using v-for as well? The current setup works but I want to utilize both props, not just the item