时间戳

首页 > 解决方案 > 在 v-for 中返回一个数组并在 vue.js 中遍历它的调用方法

javascript - 在 v-for 中返回一个数组并在 vue.js 中遍历它的调用方法

问题描述

我正在寻找执行此操作的最佳实践。在 v-for 循环中，我需要调用一个从关联模型中延迟加载数据的方法。但是如何在最佳实践中做到这一点？

<div v-for="speaker in allSpeaker" :key="speaker.id" class="d-sm-flex mt-8 align-start">
      // here i call that method
      {{ const programs = await speaker.getPrograms() }}
          <li v-for="program in programs"...
       /// probably bad practice!
                <v-img
                    v-if="!!speaker.image"
                    class="white--text mx-auto mr-sm-3 ml-sm-0 mb-5 mb-sm-0"
                    aspect-ratio="1"
                    :src="speaker.image"
                    :srcset="speaker.image.set"
                />
                <div v-else class="image-replacer mx-auto mr-sm-3 ml-sm-0 mb-5 mb-sm-0">&nbsp;</div>
                <div>
                    <div class="">
                        <p>{{speaker.firstname + ' ' + speaker.lastname}}</p>
                        <p>{{speaker.organisation}}</p>
                    </div>
                    <div class="py-4">{{speaker.description}}</div>
                </div>

我在上面评论了我想做的事情。我在这里寻找最佳实践

标签： javascriptloopsvue.js

解决方案

{{ const programs = await speaker.getPrograms() }} 这不应该在您的模板上。

我会尝试一种生命周期方法，例如：

async init() {
    this.allSpeakers = await getSpeakers()
    this.programs = this.allSpeakers.map(speaker => speaker.getPrograms())

}

在您的模板中v-if="programs"，您的程序和 allSpeakers 都应该有一个，以便等待获取数据然后渲染

推荐阅读