javascript - 在使用 Vue.js 加载数据之前阻止显示组件

Question

警告:我对 Vue 非常陌生。

我正在使用它构建一个小型表单小部件，可以为我的客户嵌入各种站点。我的每个客户都可以自定义表单，所以我使用 vue-form-generator包从我的 API 加载自定义模式，然后生成表单。

我已经得到它来加载数据，但我不确定如何推迟该组件的加载，直到数据加载完成。我尝试使用 v-if，但该属性似乎绑定(bind)到 data，这是我进行数据加载的地方。

<template>
  <div id="app">
    <vue-form-generator  v-if="loaded" :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueFormGenerator from 'vue-form-generator/dist/vfg-core.js'
  import 'vue-form-generator/dist/vfg-core.css'

  Vue.use(VueFormGenerator)

  export default {
    name: 'app',

    data: function () {
      return fetch('http://localhost:3000/forms')
        .then(function (response) {
          loaded = true;
          return response.json()
        }).then(function (json) {
          return json
        }).catch(function (ex) {
          console.log('parsing failed', ex)
        })
    }
  }
</script>

这里有更好的方法吗？

谢谢!

Answer 1

当数据方法需要返回一个普通的 javascript 对象时，您将返回一个 promise 作为您的数据。

相反，您可能会这样做。

export default {
    name: "app",
    data(){
        return {
            loaded: false, 
        }
    },
    created(){
        fetch('http://localhost:3000/forms')
          .then(function (response) {
             return response.json()
           }).then(function (json) {
             this.loaded = true;
             // set other values from json
           }.bind(this)).catch(function (ex) {
             console.log('parsing failed', ex)
           })
    }

}