v-for adding two props in the same component vuejs-CodePudding

Guys

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

COMPONENT

<template>
    <div >
        <h5> {{ cardNumber }}</h5>
        <h3>{{ cardItem }}</h3>
    </div>
</template>
  
<script>
export default {
    name: 'HighlightCard',
    props: ['cardItem', 'cardNumber']
}
</script>

V-FOR INSIDE OTHER COMPONENT

<template>
     <div >
            <HighlightCard 
                v-for="(itemCard, index) in cardItems" 
                :key="index"
                :cardItem="itemCard"
                />
      </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

CodePudding user response：

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

Vue.component('highlightCard', {
  template: `
    <div >
        <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 >
    <highlight-card 
        v-for="(itemCard, index) in cardItems" 
        :key="index"
        :card-item="itemCard"
        :card-number="num(itemCard)"
        />
  </div>
</div>