根据 Vue 中传递的 prop 值有条件地显示项目列表

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 getter。问题是这个数组可以为空，所以当它为空时，loading 变量为true，反之亦然。

因此，预期的行为是 Card.vue 组件显示为空卡片。将loading 值传递给v-card 和v-card-text 如果它的单个组件有效，但不知何故它不适用于列表。 那么我怎样才能让它呈现卡片列表呢？

Answer 1

v-for 是一个 for 循环。如果列表是空的，那么它甚至不会运行，这就是你没有得到任何卡片的原因。我希望你的问题是正确的

你可以这样做

<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

computed 变量loading 的逻辑应该在 v-card 组件中进行，而不是在父组件中。将计算属性作为道具传递不是一个好习惯。