Closed
Description
I get this error when I try to use the VueFormGenerator component without passing in an options property. For example,
<template>
<vue-form-generator :schema="schema" :model="model"></vue-form-generator>
</template>
<script>
import { component as VueFormGenerator } from 'vue-form-generator';
export default {
components: {
VueFormGenerator,
},
data() {
return {
schema: {
fields: [
{ model: 'foo', type: 'number' },
],
},
model: {
foo: 3.14,
},
},
},
};
</script>The bug is in the watch method in src/formGenerator.vue, where the library does not check if this.options is truthy before checking if this.options.validateAfterLoad is true. Reference.
There are two potential solutions to this problem: either set default values for the options property or add an additional check for this.options before access this.options.validateAfterLoad.
To set a default value, the library could define its props as:
<script>
export default {
props: {
schema: Object,
options: {
type: Object,
default: {
validateAfterLoad: false,
},
},
// etc
},
};
</script>To just add the extra check, the code would need to change from:
// Model changed!
if (this.options.validateAfterLoad === true && this.isNewModel !== true)
this.validate();
else
this.clearValidationErrors();to:
// Model changed!
if (this.options && this.options.validateAfterLoad === true && this.isNewModel !== true)
this.validate();
else
this.clearValidationErrors();so that it matches the line later in the same file: Reference:
// First load, running validation if neccessary
if (this.options && this.options.validateAfterLoad === true && this.isNewModel !== true)
this.validate();
else
this.clearValidationErrors();