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

Question

我的情况是这样的：

如果我搜索一个数据，它会显示所有数据医生。但是对于可用的日子，我想单独制作。当完成显示所有医生的数据时。我想调用 available 异步方法或调用 api 来显示可用日期。当医生数据出现在屏幕上时，可用日期为运行。所以当医生的数据出现在屏幕上时，它会调用 available day。如果用户向下滚动，它将调用另一位医生的可用日期

我的代码是这样的：

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

Answer 1

这是使用 vue-observe-visibility 插件 (https://github.com/Akryum/vue-observe-visibility) 加载数据的片段：

应用从模型源加载数据
A placeholder/preloader 表明有事情发生
当数据下载时（进入视图后）预加载器消失

注意v-observe-visibility的参数：你必须传递一些ID（自定义参数），你应该只传递一次（once: true)，您可能需要对其进行一些限制。

注意： 此代码段中下载的数据非常小，您可能会错过 "downloading" 状态 - 快速向下滚动到末尾（有 100列表中的帖子）

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    posts: []
  },
  methods: {
    fetchPosts(id) {
      return fetch(`https://jsonplaceholder.typicode.com/posts/${id ? id : ''}`)
        .then(response => response.json())
        .then(json => json)
    },
    async visibilityChanged(isVisible, entry, id) {
      const post = await this.fetchPosts(id)
      Vue.set(this.posts.find(e => e.id === id), 'body', post.body)
    }
  },
  async mounted() {
    const data = await this.fetchPosts()
    // this is only for the mockup data: I pluck the id and title,
    // so the body can be downloaded later
    this.posts = data.map(e => ({
      id: e.id,
      title: e.title
    }))
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row v-for="post in posts" :key="post.id" v-observe-visibility="{
          callback: (isVisible, entry) => visibilityChanged(isVisible, entry, post.id),
          once: true,
          throttle: 100
        }">
        <v-col>
          <v-row>
            <v-col>
              <b>{{post.title}}</b>
            </v-col>
          </v-row>
          <v-row>
            <v-col>
              <v-progress-circular indeterminate color="primary" v-if="!post.body"></v-progress-circular>
              {{post.body}}
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

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

How do I call a method if the data appears on the screen (vue)?

asynchronous

loading

vue.js

vue-component

vuetify.js