For create a generic form with parents/child component , i create this ts file.
model: "IUser",
resource: 'users',
fields: {
firstname: {
type: 'text',
name: 'firstname',
add: true,
list: true,
edit: true,
label: 'Prenom',
value: ''
},
lastname: {
type: 'text',
name: 'lastname',
add: true,
list: true,
edit: true,
label: 'Nom',
value: ''
},
}
}
And i called child components into his parent
Parent component
<el-form
:model="formData"
:rules="rules"
>
<div v-for="(item, name, index) in models.fields" :key="index">
name:{{ item.name }} {{ index }}
<Text
v-if="item.type === 'text'"
:label="item.label"
v-model="values[index]"
:ruleName= "item.name"
/>
</div>
<button @click="SendData()"></button>
</el-form>
child component
<div class="col-md-6 fv-row">
<label class="required fs-6 fw-bold mb-2"
>{{label}}</label
>
<el-form-item :prop="ruleName">
<el-input
v-model="input"
@input="$emit(`update:${ruleName}`, input)"
/>
</el-form-item>
</div>
but I can't have the values of the v-model from the child to the parent. Do you have solution ?