VueJS - 从递归树中获取输入值答案

【问题标题】：VueJS - get input values from a recursive treeVueJS - 从递归树中获取输入值
【发布时间】：2020-07-20 23:35:12
【问题描述】：

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

例子：

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

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

<script>
export default {
    props: {
        treeData: [Object, Array]
    },

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

    methods: {
        sendForm: function() {}
    }
};
</script>

TreeNodeComponent.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>

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

我习惯于在这方面使用v-model，但我不知道如何在递归组件上使用它，因为文档只涉及设置直接父级的数据。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html vue.js recursion axios

【解决方案1】：

这样做的一种方法是从TreeComponent 向下传递一个道具到每个节点。

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

然后每个节点将 prop 向下传递给它的子节点。

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

这样每个节点都会直接引用TreeComponent。

在每个节点中，您可以watch 模型并更新form 属性。您需要使用您的child.id，以便知道哪个字段是哪个。

您的formRepo 可以是一个完全成熟的对象，但哈希也可以工作。

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

注意：如果您希望 formRepo 具有响应性，则需要使用 Vue.set 为其添加新键。

【讨论】：

【解决方案2】：

感谢您的回答。

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

我这样做的方式是：

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

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

要填写一些数据变量（axios请求需要Route）

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

然后是一些魔法。改变方法。（把 axios 去掉。）

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()
        }
    }
}

我知道验证位有一些改进的余地。如果用户在文本字段中输入“on”，这可能会失败。所以有工作要做，但表格的基本填写是有效的。

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

【讨论】：