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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.