v-for 在同一个组件 vuejs 中添加两个 props

Question

Guys

I want to do a v-for using a component that has two differents props

COMPONENT

<template>
    <div class="bg-light rounded p-2 px-5">
        <h5> {{ cardNumber }}</h5>
        <h3>{{ cardItem }}</h3>
    </div>
</template>
  
<script>
export default {
    name: 'HighlightCard',
    props: ['cardItem', 'cardNumber']
}
</script>

V-FOR INSIDE OTHER COMPONENT

<template>
     <div class="row m-auto">
            <HighlightCard 
                v-for="(itemCard, index) in cardItems" 
                :key="index"
                :cardItem="itemCard"
                class="col m-3"/>
      </div>
</template>
<script>
import HighlightCard from './HighlightCard.vue';
export default {
    name: 'TopDashboard',
    components: {
        HighlightCard
    },
    data () {
        return {
            cardItems: ['Impressões', 'Cliques', 'Conversões', 'Custo'],
            cardNumbers: ['2.300', '259', '45', 'R$ 350,00']
        }
    }
}
</script>

Is there any way to also add the cardNumber using v-for? It works fine the way it is, but I wanna use the both props, not just the ItemCard

Answer 1

If I understood you correctly, try to return right number with index:

 Vue.component('highlightCard', { template: ` <div class="bg-light rounded p-2 px-5"> <h5> {{ cardNumber }}</h5> <h3>{{ cardItem }}</h3> </div> `, props: ['cardItem', 'cardNumber'] }) new Vue({ el: "#demo", data () { return { cardItems: ['Impressões', 'Cliques', 'Conversões', 'Custo'], cardNumbers: ['2.300', '259', '45', 'R$ 350,00'] } }, methods: { num(val) { return this.cardNumbers[this.cardItems.findIndex(i => i === val)] } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="row m-auto"> <highlight-card v-for="(itemCard, index) in cardItems":key="index":card-item="itemCard":card-number="num(itemCard)" class="col m-3"/> </div> </div>