Javascript VueJS-从递归树获取输入值

我需要创建一个动态表单，它以树的方式构建。表单可以由用户（创建/设计表单的用户）随时更改，因此我的输入也会动态更改

例如：

root
--groeisnelheid
----niveau
------beginner (input radio)
------recreatief (input radio)
------competitie (input radio)
------tour (input radio)
----input text
----begeleiding
------another input
------and another
--another category
----speed
------input
------input

正如你所见，这不是最简单的形式。。。用户（本例中为管理员用户）可以编辑或创建新表单

我可能低估了这份工作，因为我正在努力创造它的输入端，并且已经在挣扎

到目前为止我所做的：

TreeComponent.vue

导出默认值{
道具：{
treeData:[对象，数组]
},
数据（）{
返回{
treeValues:[]
};
},
方法：{
sendForm:function（）{}
}
};

TreeNodeComponent.vue

{{node.name}



{{node.name}
导出默认值{
名称：“节点”，
道具：{
节点：[对象，数组]
}
};

这将导致所有输入显示为我想要的。但现在真正的问题是；如何在根组件（TreeComponent.vue）中获取这些输入的值，以便将其发送到服务器。无论是在更改时还是在用户继续使用表单时

我习惯于在这方面使用

v-model

，但我不知道如何在递归组件上使用它，因为文档只涉及设置直接父级的数据

---

任何帮助都将不胜感激。

一种方法是将一个道具从

TreeComponent

传递到每个节点

<template>
  <div class="tree">
    <ul class="tree-list">
        <tree-node :node="treeData" :form="formRepo"></tree-node>
    </ul>
  </div>
</template>

---

注意：如果您希望

formRepo

是被动的，您需要使用

Vue。设置
向其添加新键。
谢谢您的回答

我通过在每次更改时将数据发布到服务器来解决这个问题，因为这是一个方便的功能

我这样做的方式是：

从输入调用函数（对文本输入的调用相同）

然后是一些魔法。改变方法。（未使用axios位。）

我知道在验证方面还有一些改进的空间。如果用户在文本字段中输入“开”，则可能会失败。所以有工作要做，但基本的表格填写是有效的

至于这是否是最好的方式，我不知道，因为我是Vue的新手

<template>
    <li v-if="node.children && node.children.length" class="node">
        <span class="label">{{ node.name }}</span>

        <ul>
            <node v-for="child in node.children" :node="child" :key="child.id"></node>
        </ul>
    </li>
    <div v-else class="form-check form-check-inline">
        <input
            type="radio"
            class="form-check-input"
            :name="'parent-' + node.parent_id"
            :id="node.id"
        />
        <label for class="form-check-label">{{ node.name }}</label>
    </div>
</template>

<script>
export default {
    name: "node",
    props: {
        node: [Object, Array]
    }
};
</script>

<template>
  <div class="tree">
    <ul class="tree-list">
        <tree-node :node="treeData" :form="formRepo"></tree-node>
    </ul>
  </div>
</template>

 <node v-for="child in node.children" :node="child" :key="child.id" :form="form"></node>

data() {
    return {
        treeValues: [],
        formRepo: {
        }
    };
}

<input
    type="radio"
    class="form-check-input"
    :name="'parent-' + node.parent_id"
    :id="node.id"
    @input="change($event, node.id, node.parent_id)"
/>

data() {
    return {
        input: {
            id: null,
            parentId: null,
            radio: false,
            value: null
        },
        route: null
    };
},

methods: {
    change: function(event, id, parentId) {
        this.input.parentId = parentId;
        this.input.id = id;

        if (event.target.value === "on" || event.target.value === "off") {
            this.input.radio = true;
            this.input.value = event.target.value === "on" ? true : false;
        } else {
            this.input.value = event.target.value;
        }

        if (this.input.value) {
            axios.put().then().catch()
        }
    }
}