[Vuejs]-Conditionally displaying list of items based on passed prop values in Vue

by

2👍

✅

v-for is a for loop. If the list is empty then it wont run even once that is why you do not get any cards.I hope i got your question right

You could do something like this

<div v-if="!loading">
 <Card
      v-for="d in basic_fc"
      :key="d.id"
      :title="d.title"
      :data="d.data"
      :unit="d.unit"
      :loading="loading"
      :class="'home__simple-finance--'+d.id"
  ></Card>
</div>
<div v-else>
  <Card
      :loading="loading"
      :class="'home__simple-finance--'+d.id"
  ></Card>
</div>

PS: v-bind:{{param}} is same as :{{param}}

👤Allan Banis

1👍

You should do the logic of computed variable loading in v-card component, not in parent component. its not a good practice to pass as props a computed property.

👤Dean Gite

Leave a comment