I am a new full-stack developer student and I want to use Vue-Form-Generator to generate a form with input fields and I want to browse an image. All of my fields works except the image browse one. It doesn’t displays on my page. I tried a lot of things, but my last hope is someone who could know it.
My Vue.js code :
<div class="page"> <h2>Ajout d'un chercheur</h2> <div class="form"> <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator> </div> </div> </template> <script> export default { data () { return { model: { avatar: null, prenom: 'Prénom', nom: 'Nom', url: 'www.son_site.fr' }, schema: { fields: [ { type: "image", label: "Photo", model: "avatar", placeholder: "Photographie du chercheur", browse: true, required: true, featured:true, }, { type: 'input', inputType: 'text', label: 'Prénom', model: 'prenom', placeholder: 'Prénom', featured: true, required: true }, { type: 'input', inputType: 'text', label: 'Name', model: 'nom', placeholder: 'Nom', featured: true, required: true }, { type: 'input', inputType: 'text', label: 'URL / Site Web', model: 'url', placeholder: 'www.son_site.fr', featured: true, required: true }, { type: 'submit', onSubmit(model) { console.log(model); }, label: '', buttonText: "Ajouter", validateBeforeSubmit: true }, ] }, formOptions: { validateAfterLoad: true, validateAfterChanged: true, validateAsync: true } } } } </script>
What it displays : my page with everything except the image browse
Advertisement
Answer
Given the console error you have, looks like you are using the “Core” rather than “Full” version of Vue-Form-Generator.
See the docs here for how to use the full version, which includes all field types. The image field type is not in the core version.
// the "full" way <script> import VueFormGenerator from "vue-form-generator"; import "vue-form-generator/dist/vfg.css"; // optional full css additions </script> // the "core" way <script> import VueFormGenerator from "vue-form-generator/dist/vfg-core.js"; import "vue-form-generator/dist/vfg-core.css"; // optional core css additions </script>