静态 HTML 元素在 Vue 应用程序中获取数据之前加载

Question

我正在使用 VueJS 和 VueRouter 创建我的应用程序。我的问题是，当我获取数据时，Vue 组件上使用的静态 HTML 元素在实际获取之前加载，导致在获取数据之前显示空表单和表格。我从 created() 生命周期挂钩调用我的 fetch 方法，所以结果让我感到困惑。到目前为止，这是我的代码：

<template>
  <div id="app">
    <h1>My Data length: {{fetchedData.length}}</h1>
    <li v-for="value in fetchedData">{{value}}</li>
  </div>
</template>


export default {
  name: "MyVueComponent",
  data() {
    return {
      fetchedData: [],
    }
  },
  methods: {
    async getData() {
       await fetch('https://cli-vue-application.herokuapp.com/user/getUser', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      })
          .then(function (response) {
            return response.json();
          }).then(function (data) {
            this.fetchedData= data
          }.bind(this));
    }
  },
  created() {
    this.getData();
  }
}

数据已正确获取，但 h1 元素首先显示，前几秒的长度为“0”，因为如上所述加载静态 HTML 后获取发生。

Answer 1

你可以把所有东西都包装成一个简单的东西 if fetchedData 有东西可以看到所有东西，否则不能:

 <template>
   <div id="app">
     <div v-if="fetchedData.length">
      <h1>My Data length: {{fetchedData.length}}</h1>
      <li v-for="value in fetchedData">{{value}}</li>
     </div>
   </div>
 </template>

如果你愿意，你也可以添加一个 else，也就是说，如果还没有任何东西到达，而不是什么都不显示，输入“正在加载”文本或更好的像这样的微调器： https://bootstrap-vue.org/docs/components/spinner#spinners

因此：

 <template>
   <div id="app">
     <div v-if="fetchedData.length">
      <h1>My Data length: {{fetchedData.length}}</h1>
      <li v-for="value in fetchedData">{{value}}</li>
     </div>
     <div v-else>
       Loading...
       //Or your spinner
     </div>
   </div>
 </template>

静态 HTML 元素在 Vue 应用程序中获取数据之前加载

Static HTML Elements loads before data fetch in Vue Application

javascript

vue.js

fetch-api

vue-router