Question

我非常感兴趣的是显示异步加载的vue模板数据。在我的特殊情况下，我需要显示产品对象的title属性：

<td class="deals__cell deals__cell_title">{{ getProduct(deal.metal).title }}</td>

但该产品目前尚未加载，因此标题根本无法呈现。我找到了一个可行的解决方案：如果产品没有加载，那么在承诺解决后再调用getProduct函数：

getProduct (id) {
  if (!this.rolledMetal.all.length) {
    this.getRolledMetal()
      .then(() => {
        this.getProduct(id)
      })
    return {
      title: ''
    }
  } else {
      return this.getRolledMetalById(id)
  }
}

然而，也许你知道更优雅的解决方案，因为我认为这个有点复杂：）

Answer 1

我在加载数据时总是使用加载器或微调器！

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

以及脚本：

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

Answer 2

在Vue中有一些很好的处理异步数据的方法。

调用一个方法，该方法在创建的生命周期钩子中提取数据，并将其分配给数据属性。这意味着您的组件具有用于获取数据的方法和用于存储数据的数据属性。
调度取回数据的Vuex操作。该组件具有计算属性，可从Vuex获取数据。这意味着用于获取数据的函数在Vuex中，并且您的组件具有用于访问它的计算属性。

在这种情况下，您的组件看起来需要具有RolledMetal并且基于它检索产品。要解决此问题，您可以添加获取它们的方法，并在创建的生命周期中调用它们。第二种方法应在第一种方法之后调用，以确保它按预期工作。

如何在vue模板

2 个答案: