如果数据出现在屏幕上，如何调用方法？

Question

我这样的情况

如果我搜索数据，它将显示所有数据医生。但是对于有空的日子，我想单独进行。显示完所有医生的数据后。我想为异步调用可用方法或调用api以显示可用日期。当医生数据出现在屏幕上时，将运行该可用日期。因此，当医生的数据出现在屏幕上时，它将称为可用日期。如果用户向下滚动，它将从另一位医生那里呼叫有空的一天

我的代码：

<v-col
v-for="(item, i) in items"
:key="i"
cols="12"
>
    <v-card
        dark
    >
        <div class="d-flex flex-no-wrap justify-space-between">
        <div>
            <v-card-title
            class="headline"
            v-text="item.doctor"
            ></v-card-title>

            <v-card-subtitle v-text="item.hospital"></v-card-subtitle>
            <v-card-subtitle>Available today</v-card-subtitle>
        </div>

        <v-avatar
            class="ma-3"
            size="125"
            tile
        >
            <v-img :src="item.src"></v-img>
        </v-avatar>
        </div>
    </v-card>
</v-col>

演示和完整的代码，例如：https://codepen.io/trendingnews/pen/ZEYpBeW?editors=1010

我的问题是如果我显示所有医生的数据（例如50个数据），则速度非常快。仅2-3秒

但是如果我显示所有医生的数据和可用天数，例如50个数据，则非常慢。大约10秒

所以有空的时候，我想把它分开。仅在屏幕上显示医生的数据时才调用它]

医生数据和可用日期是不同的API。所以这是我的问题我必须从前端处理此问题

我该怎么做？是否有可以帮助您的软件包？我已经在这个项目中使用过vuex商店

我的情况是这样的，如果我搜索数据，它将显示所有数据医生。但是对于有空的日子，我想单独进行。显示完所有医生的数据后。我想打电话给可用的...

Answer 1

您需要使用Vuex。使用vuex，您可以在启动应用程序时存储所有数据。