Vue.JS组件数据在表单提交时转换为JSON

Question

我正在构建一个应用程序，该应用程序将在页面加载时基于来自后端服务器的JSON文件构建动态表单。根据用户输入的不同，表格总是可以不同的。我已经使用VueJS组件完美构建了表单。困难的部分是我还有许多动态创建的子组件。当用户使用完表单后，我需要能够将表​​单提交为格式良好的JSON文件，该文件表示如下所示的表单层次结构：

{
    id: "id",
    value: "value",
    chilren: [
        {
            id: "id",
            value: "value",
            chilren: [
                {
                    id: "id",
                    value: "value"
                },
                {
                    id: "id",
                    value: "value"
                },
                {
                    id: "id",
                    value: "value"
                }
            ]
        },
        {
            id: "id",
            value: "value",
        }
    ]
}

我在声明我的组件，如下所示。他们能够调用自己在表单上具有嵌套的子属性。 （为了方便阅读，我简化了代码）

Vue.component('form-input' , {
    props: ['parameter'],
    data: function() {
        return {
            id: "",
            value: "",
        }
    },
    template: '\
    <div class="form-row">\
        <div>\
            <label class="form-control-label">{{ parameter.label }}</label>\
            <input v-model=value :id=parameter.id />\
        </div>\
        <div v-if="parameter.options" class="col">\
            <template v-for="option in parameter.options">\
                <form-input :parameter="option" />\
            </template>\
        </div>\
    </div>\
    '
})