vue.js - vue如何生成动态表单？

问题描述

问 题

碰到个问题，麻烦大家看看有啥好的思路不。
有个需求，需要根据后端数据动态生成表单，有各种各样类型，文本框，单选多选，下拉表单……
后端会传递过来表单类型，表单name，表单所需数据。

用vue去写，根据不同的type去生成不同类型的输入框，但是这样动态的数据，我们无法直接写到vue的data里，无法很好的提交用户输入的数据。

目前的思路是和后端商量好，前端尽量覆盖全部的字段。后端返回哪些字段需要显示和部分类型需要的数据。

解决方案

我在项目中也遇到了这个问题，思路和你差不多，就是针对各个表单写好通用的组件，然后根据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>

这篇关于vue.js - vue如何生成动态表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！