-1

我创建了这个简单的卡片组件：

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-cardandv-card-text如果它的单个组件有效，但不知何故它不适用于列表。那么我怎样才能让它呈现卡片列表呢？

4

2 回答 2

2

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}}

于 2020-03-06T15:03:17.643 回答
1

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

于 2020-03-06T15:05:10.887 回答