如何在Vue模板中显示异步数据

Question

我对在Vue模板中异步加载数据并显示的情况很感兴趣。在我的具体情况下，我需要显示产品对象的标题属性：

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

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

但是该产品当前未加载，因此标题根本未被渲染。我找到了一个可行的解决方案：如果产品未加载，则在promise解决后重新调用getProduct函数：

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

但是也许您知道更优雅的解决方案，因为我认为这个有点复杂 :)

- Alexander Shpindler

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>

- Roland

---

getDataFromApi函数是异步的，会有什么不同吗？ - Kick Buttowski

嗨，@KickButtowski，它可以是异步的，一切都会正常工作。你只需要在axios调用中使用await，就可以摆脱.then和.catch。 - Roland

Answer 2

有几种处理Vue中异步数据的有效方法。

1.在created生命周期钩子中调用一个获取数据的方法，并将其赋值给数据属性。这意味着您的组件有一个用于获取数据的方法和一个用于存储数据的数据属性。

2.分派一个Vuex action来获取数据。该组件具有从Vuex获取数据的计算属性。这意味着获取数据的函数在Vuex中，而组件具有访问它的计算属性。

在这种情况下，似乎您的组件需要一个RolledMetal，然后基于此检索产品。为了解决这个问题，您可以添加获取它们的方法，并在created生命周期中调用它们。第二个方法应在第一个方法之后的then块中调用以确保它按预期工作。

- Lassi Uosukainen