Vue 如何循环渲染异步数据

Question

<template>
   <div v-for="item in data">
       <div>{{renderData(item)}}</div>
   </div>
</template>

<script>
    renderData (item) {
        axios.getData(item).then(res => {
            return '这是我想要渲染的结果' + res
        })
    }
</script>

伪代码如上，如何在v-for语句中循环执行异步请求，并渲染请求结果

Answer 1

Child.vue
<template>
  渲染数据
<template/>
{
    props: { item },
    beforeMounted() {
        // 根据 item 获取数据
        axios.getData(this.item).then(res => {
            return '这是我想要渲染的结果' + res
        })
    }
}

<template>
   <div v-for="item in data">
       <Child :item="item" />
   </div>
</template>

Answer 2

<template>
<div v-for="item in dataList">

   <div>{{renderData(item)}}</div>

</div>
</template>

<script>

renderData (item) {
    axios.getData(item).then(res => {
        return {
            dataList: res
        }
    })
}

</script>

Answer 3

建议弄成组件的形式，循环组件，在组件里面请求就行了

Answer 4

<template lang="pug">
.real-component(v-if="isLoaded")
  // 你真正的模版

.loading(v-else) 加载中...
</template>