prevent displaying component until data loaded with Vue.js

Question

Warning: I'm extremely new to Vue.

I'm using it to build a small form widget that can be embedded on various sites for my clients. Each of my clients can customize the form, so I'm using the vue-form-generator package to load a custom schema from my API and then generate the form.

I've gotten it to load data, but I'm not sure how to defer loading of that component until the data has finished loading. I attempted to use v-if, but the property seems to be bound to data, which is where I was doing my data loading.

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

Is there a better approach here?

Thanks!

Bert · Accepted Answer · 2017-05-29 20:56:06Z

4

You're returning a promise as your data when the data method needs to return a plain javascript object.

Instead you might do something like this.

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

}

answered May 29, 2017 at 20:56

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jdixon04 Over a year ago

Thanks, Bert! Much appreciated

Collectives™ on Stack Overflow

prevent displaying component until data loaded with Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related