Javascript 在使用Vue.js加载数据之前防止显示组件

警告：我对Vue非常陌生

我用它来构建一个小的表单小部件，可以为我的客户嵌入到不同的站点上。我的每个客户端都可以自定义表单，因此我使用包从API加载自定义模式，然后生成表单

我已经让它加载了数据，但我不确定如何推迟加载该组件，直到数据加载完成。我试图使用

v-if

，但该属性似乎绑定到

数据

，这就是我加载数据的地方

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

从“Vue”导入Vue
从“vue form generator/dist/vfg core.js”导入VueFormGenerator
导入“vue表单生成器/dist/vfg core.css”
Vue.use（VueFormGenerator）
导出默认值{
名称：“应用程序”，
数据：函数（）{
返回获取（'http://localhost:3000/forms')
.然后（功能（响应）{
加载=真；
返回response.json（）
}).then（函数（json）{
返回json
}).catch（函数（ex）{
console.log（'解析失败'，例如）
})
}
}

这里有更好的方法吗

---

谢谢

当数据方法需要返回普通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)
           })
    }

}

---

谢谢你，伯特！非常感谢