I have an array of form field like below and I wanna render dynamic form with event and function
<code>[...{
label: "Logo",
field: "image",
component: SingleImg,
attributes: {
upload:false,
type: "file",
accept: "image/*",
maxFileSize: 10000000,
showUploadButton: false,
showCancelButton: false,
event:"select",
handleEvent:(event) => {
console.log("hello")
}
},
},]
</code>
<code>[...{
label: "Logo",
field: "image",
component: SingleImg,
attributes: {
upload:false,
type: "file",
accept: "image/*",
maxFileSize: 10000000,
showUploadButton: false,
showCancelButton: false,
event:"select",
handleEvent:(event) => {
console.log("hello")
}
},
},]
</code>
[...{
label: "Logo",
field: "image",
component: SingleImg,
attributes: {
upload:false,
type: "file",
accept: "image/*",
maxFileSize: 10000000,
showUploadButton: false,
showCancelButton: false,
event:"select",
handleEvent:(event) => {
console.log("hello")
}
},
},]
here is how I render:
<code><component
:is="row.component"
v-bind="row.attributes"
v-model="formData[row.field]"
:key="row.field"
@[row.event]="row.handleEvent"
></component>
</code>
<code><component
:is="row.component"
v-bind="row.attributes"
v-model="formData[row.field]"
:key="row.field"
@[row.event]="row.handleEvent"
></component>
</code>
<component
:is="row.component"
v-bind="row.attributes"
v-model="formData[row.field]"
:key="row.field"
@[row.event]="row.handleEvent"
></component>
can anyone know how to render event and function properly, please?
tell me how to render event and function properly in Vue template
New contributor
Newbie Web is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.