[Vuejs]-V-for adding two props in the same component vuejs

by

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>
👤Nikola Pavicevic

Leave a comment