Issue with dynamic model loading...

[scramatte]

Hello,

I'm using this code and it's working great except when model already has content.
When I click submit form it returns me validations errors. It look like that vuelidate is not aware about initial model data. If I change anything in every field then errors gone.

Can you give me an hand meanwhile lands the new FormVueLatte :) ?

[scramatte]

What occurs is that in the main component that embed "DynamicForm" component the local model doesn't initially fill the DynamicForm one

If I add mounted() on main component like bellow it works but not sure that is the proper way ...

  mounted () {
    this.$refs.dynamicForm.form = this.form
  }

Moreover I believe If I use axios to fill up the model I must do the same thing on axios response isn't it?

[scramatte]

With axios it doesn't work , because dynamicForm is not loaded yet when I click edit button
Note that I open a modal on click with the form inside. This why dynamicForm is not available

[marina-mosti]

Its really hard, and nearly impossible to tell without looking at the code

[scramatte]

It occurs with your main code. I only fill form data in src/App.vue file

Please take a look to my fork.
https://github.com/scramatte/dynamic-schema-vuelidate

<script>
import schema from './data/schema.json'
import DynamicForm from './components/DynamicForm'

export default {
  name: 'app',
  components: { DynamicForm },
  data () {
    return {
      schema,
      form: {
        firstName: 'Test',
        lastName: 'Test',
        email: 's@gmail.com'
      },
      status: null
    }
  },
  methods: {
    submitForm () {
      this.$refs.dynamicForm.validate()
      if (this.status.invalid) {
        return
      }

      alert('Form submitted')
    },
    saveStatus (status) {
      this.status = status
    }
  }
}
</script>

Thank you for your help
Regards

[marina-mosti]

  created () {
    for (const name in this.schema) {
      this.$set(this.form, name, null)
    }
  }

If I understood right, I think you'd need to modify this loop to make it set a predefined value for the form. But again, this is not supported currently by the lib and most likely will not be supported until 2.0, so I really can't help you.

The article that you're basing this off wasn't meant to be done with this lib, but just as a standalone POC that Vuelidate 1.0 can be dynamically validated.