Условное отображение списка предметов на основе переданных значений пропеллера в Vue

Question

Я создал этот простой компонент карты:

Card.vue

<template>
            <v-card :loading="loading">
                <v-card-text v-if="!loading">
                    <div class="text-center font-weight-black title text--primary">
                        {{data}} {{unit}}
                    </div>
                    <div class="text-center">
                        {{title}}
                    </div>
                </v-card-text>
            </v-card>
</template>

Для этого компонента я передаю следующие реквизиты:

props: ['title', "data", "unit", "loading"]

Теперь в родительском компоненте я использую v-for для создания списка вышеупомянутого компонента:

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

и вычисляемых свойств:

computed: {
  ...mapGetters(["basic_fc"]),
  loading () {
      if (this.basic_fc.length==0) {
        return true
      } 
      else {
        return false
      }
    }
  }

Теперь basic_fc является получателем vuex который возвращает массив значений. Дело в том, что этот массив может быть пустым, поэтому, когда он пуст, переменная loading равна true и наоборот.

Таким образом, ожидаемое поведение таково, что компонент Card.vue показан, но как пустая карточка. Передача значения loading в v-card и v-card-text работает, если его отдельный компонент, но почему-то не для списка. Так как я могу сделать так, чтобы список карт все равно отображался?

Answer 1

v-for - это для l oop. Если список пуст, то он не запустится ни разу, поэтому вы не получаете никаких карточек. Надеюсь, я правильно понял ваш вопрос

Вы могли бы сделать что-то вроде этого

<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}} совпадает с :{{param}}

Answer 2

Вы должны сделать логи c из computed переменной loading в компоненте v-card, а не в родительском компоненте. не рекомендуется передавать его в качестве реквизита вычисляемого свойства.