Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The data received from back end doesn't load on form on front end #27

Closed
viniciusnazario opened this issue Jan 31, 2020 · 3 comments
Closed

Comments

@viniciusnazario
Copy link

viniciusnazario commented Jan 31, 2020

Hey, before all, i need thank you for this amazing package! But i have a problem with him.
I created a schema in back end to mount the front end's form, but when I change the value( this event is responsible for get data for back end) the form doesn't appear in the screen...
Can you help me please? Thanks!

Follow the schema that I set up:
DevTools - localhost8080

Follow the values of schema:
DevTools - localhost8080_2

And my application without form
Help Desk - Google Chrome_2

@viniciusnazario
Copy link
Author

Important to highlight, sometimes the form apper in screen, I don't have ideia what happend... Anyway, thanks!

@wotamann
Copy link
Owner

wotamann commented Feb 1, 2020

<template>
    // IMPORTANT: Load Value and Schema before displaying Component  
    <v-form v-if="showFormbase">
      <v-form-base  :value="myValue  :schema="mySchema"  @change="change" />
    </v-form>
</template>

<script>
export default {
  components: {
    // 1) LAZY LOADING 'VFormBase' COMPONENT HERE
    'VFormBase': () => import('@/components/vFormBase'),
   },
  data () {
    return {
      showFormbase: false,
      myValue: {},
      mySchema: {}
    }
  },
  async mounted () {
    // 2) ASYNC LOADING VALUE & SCHEMA
    this.myValue = await this.delay( { name: 'Base'  } )
    this.mySchema = await this.delay( { name: { type: 'text', label: 'Name', flex: 5 } } )

    // 3) LAZY LOADING 'VFormbase' after making visible
    this.showFormbase = true
  },
  methods: {
    change(val){ console.log(val) },
    delay (obj) {  
       return new Promise((resolve, reject) => {
         setTimeout(() => resolve(obj), 500)
       })
    }
  }
}
</script>

You can take a look at Example to Section 'Lazy Loading Component'.
You have load Schema and Values before you can display the form!

@viniciusnazario
Copy link
Author

Hey man, thanks for helping, you really saved me,
Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants