我在项目中也遇到了这个问题,思路和你差不多,就是针对各个表单写好通用的组件,然后根据type
用v-if
来渲染对应的表单,数据,事件什么的都可以动态的传进去
// template
<div v-for="(item, index) in formData">
<input v-if="item.type === 'input'" v-model='item.val'>
<radio v-if="item.type === 'radio'" @click='item.process'></radio>
<checkbox v-if="item.type === 'checkbox'" @click='item.process'></checkbox>
...
</div>
<input type="button" @click="submit"></input>
<script>
export.dafault = {
data () {
return {
formData: [{
type: 'input',
val: ''
},{
type: 'radio',
data: {...},
process: this.click1,
val: ''
}, {
type: 'checkbox'
data: {...}
process: this.click2,
val: ''
}]
}
},
methods: {
click1 () {
console.log(1)
},
click2 () {
...
},
submit () {
// 在这里可以拿到用户输入的值,通过v-model赋的值
// 我在这里就直接取值了,这里的麻烦之处就在于可能需要遍历formData来取到对应的值
// 可以使用数组的find方法
console.log(this.formData[0].val)
}
}
}
</script>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…