javascript 如何在 vue 模板中显示异步数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49745497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display async data in vue template
提问by Alexander Shpindler
I'm interesting in the case of displaying in vue template data which loaded asynchroniously. In my particular situation I need to show title attribute of product object:
在显示异步加载的 vue 模板数据的情况下，我很感兴趣。在我的特殊情况下，我需要显示产品对象的标题属性：
<td class="deals__cell deals__cell_title">{{ getProduct(deal.metal).title }}</td>
But the product isn't currently loaded so that the title isn't rendered at all. I found a working solution: if the products aren't loaded then recall getProduct function after the promise will be resolved:
但该产品当前未加载，因此根本不呈现标题。我找到了一个可行的解决方案：如果产品未加载，则在解决承诺后调用 getProduct 函数：
getProduct (id) {
if (!this.rolledMetal.all.length) {
this.getRolledMetal()
.then(() => {
this.getProduct(id)
})
return {
title: ''
}
} else {
return this.getRolledMetalById(id)
}
}
However maybe you know more elegant solution because I think this one is a little bit sophisticated :)
但是，也许您知道更优雅的解决方案，因为我认为这个解决方案有点复杂:)
回答by roli roli
I always use a loader or a spinner when data is loading!
加载数据时，我总是使用加载器或微调器！
<template>
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<template v-if="loading">
<spinner></spinner> <!-- here use a loaded you prefer -->
</template>
<template v-else>
<tr v-for="row in rows">
<td>{{ row.name }}</td>
<td>{{ row.lastName }}</td>
</tr>
</template>
</tbody>
</table>
</template>
And the script:
和脚本：
<script>
import axios from 'axios'
export default {
data() {
return {
loading: false,
rows: []
}
},
created() {
this.getDataFromApi()
},
methods: {
getDataFromApi() {
this.loading = true
axios.get('/youApiUrl')
.then(response => {
this.loading = false
this.rows = response.data
})
.catch(error => {
this.loading = false
console.log(error)
})
}
}
}
</script>
回答by Lassi Uosukainen
There are a few good methods of handling async data in Vue.
在 Vue 中有一些处理异步数据的好方法。
Call a method that fetches the data in the created lifecycle hook that assigns it to a data property. This means that your component has a method for fetching the data and a data property for storing it.
Dispatch a Vuex action that fetches the data. The component has a computed property that gets the data from Vuex. This means that the function for fetching the data is in Vuex and your component has a computed property for accessing it.
调用一个方法，该方法在创建的生命周期挂钩中获取数据，并将其分配给数据属性。这意味着您的组件具有获取数据的方法和用于存储数据的数据属性。
调度一个获取数据的 Vuex 操作。该组件有一个计算属性，可以从 Vuex 获取数据。这意味着获取数据的函数在 Vuex 中，并且您的组件具有用于访问它的计算属性。
In this case, it looks like your component needs to have a RolledMetal and based on that it retrieves a product. To solve this you can add methods that fetch both of them, and call them on the created lifecycle. The second method should be called in a then-block after the first one to ensure it works as expected.
在这种情况下，看起来您的组件需要具有 RolledMetal 并基于此检索产品。为了解决这个问题，您可以添加获取它们的方法，并在创建的生命周期中调用它们。第二个方法应该在第一个方法之后的 then-block 中调用，以确保它按预期工作。
