防止在加载Vue.js的数据之前显示组件
防止在加载Vue.js的数据之前显示组件
提问于 2017-05-29 20:47:54
警告:我对Vue非常陌生。
我正在使用它构建一个小表单小部件，它可以嵌入到我的客户端的各个站点上。我的每个客户端都可以自定义表单，因此我使用vue型生成器包从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>这里有更好的方法吗？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-29 20:56:06
当数据方法需要返回一个普通的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)
})
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44250106
复制相关文章
相似问题
腾讯云开发者
