循环出Vue组件中的异步数据

Question

我需要加载异步数据，然后将其循环到 vue 组件中。我知道循环在我有数据之前运行，但我不知道如何重新运行或保持循环，直到我有数据。我测试过但不起作用的一种解决方案是 Data 中的加载属性和 isLoaded 计算函数，然后 -

                <div v-if="isLoaded">
                    <ul v-for="item in menu.items">
                        <li>{{ item.heading }}</li>
                    </ul>
                </div>

似乎循环仍然运行，我得到了错误 -

TypeError: Cannot read property 'items' of undefined

整个页面似乎在该错误之后冻结，所以我可能无法在异步函数中将加载的 Data 属性设置为 true。我已经测试过在创建和挂载的钩子中运行异步。

当我离开页面并返回时，一切正常，可能是因为数据已加载。我还测试了通过单击按钮来设置 loded 属性，当循环没有注释而不是循环运行时它工作正常。

我认为这是谷歌搜索后的常见解决方案，但我无法让它工作。有什么问题或任何其他建议（我的最后一个是在其他页面中加载数据）。

另见-

export default {
    data() {
        return {
            loaded: false,

和-

computed: {
    isLoaded() {

        return this.loaded

    }

Answer 1

您可以简单地检查menu 不是undefined

<div v-if="menu && menu.items">
    <ul v-for="item in menu.items">
       <li>{{ item.heading }}</li>
    </ul>
 </div>

或在您获取数据的位置：

methods: {
  getData() {
    this.loaded = false
    callApi().then(res => {
      this.menu = res // example
      this.loaded = true
    })
  }
}

 <div v-if="loaded">
   <ul v-for="item in menu.items">
     <li>{{ item.heading }}</li>
   </ul>
 </div>

Answer 2

你可能遇到的问题：

1. menu is null编译模板时，如@ittus已经回答，使用v-if控制流程。

2. 在向一个对象添加属性时使用Vue API: $set。 （查看Vue: Reactivity in Depth了解更多详情）

所以代码会像下面的演示：

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    menu: null,
    loading: false
  },
  mounted: function () {
    this.loading = true
    setTimeout(() => {
      this.menu = this.menu ? this.menu : {}
      this.$set(this.menu, 'items', [{'heading': 'a1'},{'heading': 'b1'}, {'heading': 'c1'}])
      this.loading = false
    }, 1500)
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <div v-if="!loading">
      <div v-if="menu">
        <ul v-for="item in menu.items">
            <li>{{ item.heading }}</li>
        </ul>
      </div>
      <p v-else>No Data</p>
    </div>
    <p v-else>Loading...</p>
</div>