Question

警告：我对Vue非常陌生。

我正在使用它构建一个小型窗体小部件，可以嵌入到我的客户端的各种站点上。我的每个客户都可以自定义表单，因此我使用vue-form-generator包从我的API加载自定义架构，然后生成表单。

我已经得到它来加载数据，但我不确定在数据加载完成之前如何推迟加载该组件。我试图使用v-if，但该属性似乎绑定到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)
           })
    }

}

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

1 个答案: