Async Loading

Lazy loading your component

1. lazy import of 'vFormBase' component

2. asynchronous loading of the schema

3. asynchronous loading of the model values

4. asynchronous loading of the layout

Vue-File

<v-form-base 
    :model="myModel" 
    :schema="mySchema" 
    :col="myCol" 
/>

<script>
  export default {
    name: 'AsyncLoad',
    components: {
      // # STEP 1) Lazy Loading of 'vFormBase' component here
      'VFormBase': () => import('@/components/vFormBase')
    },
    data () {
      return {
        myModel: {},
        mySchema: {},
        myCol:{}
      }
    },
    async mounted () {
      // # STEP 2) Async Loading of Schema
     this.mySchema = await this.delay({
       name: { type: 'text' },
       checkbox: { type: 'checkbox' }      
      }),
      // # STEP 3) Async Loading of Value
      this.myModel = await this.delay({
        name: 'Base',
        checkbox: true      
      })
      // # STEP 4) Async Loading of Grid
      this.myCol= await this.delay({
        cols:12, 
      })
    },
    methods: {
      delay (obj) { 
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve(obj), 1000)
        })
      }
    }
  }
</script>

Example