1

我正在使用 vue.js 中的 HTML 构建器 GUI，并且我被递归组件的更新所困扰。

我的主文件 Home.vue 中有两个拖放，一个列出可用组件（标题、问题、文本...），另一个列出您添加和克隆这些组件的位置。该拖动区域对于其内部组件也是可拖动的（一个问题可能会导致另一个问题或文本等）。我使用 vue-draggable 库和嵌套可拖动递归组件来实现这一点。

我的问题是每个组件都是可编辑的，我根本不知道如何保存这些更改。由于我将树数据作为道具传递，因此我无法在子节点中更改它，并且由于组件是递归的，因此我不确定是否向父节点发送 $emit ...我能找到的所有示例都是关于具有固定数据的简单树。

实现这一目标的最佳方法是什么？Vuex 是个好主意吗（如果是的话，是否有一个例子，因为我不知道从哪里开始）？

主页.vue

    <script>
    export default {
        name: 'Home',
        components: {
            draggable,
            nestedDraggable
        },
        data() {
            return {
                listDraggable: [
                    {
                        "name": "Title",
                        "component": "inputTitle", // Component name that will be load 
                        "id": 0,
                    },
                    {
                        "name": "Question",
                        "component": "inputQuestion",
                        "id": 1,
                    },
                    {
                        "name": "Text",
                        "component": "inputText",
                        "id": 2,
                    }
                ],
                treeList: [],
            }
        }
    }
</script>
<template>
    <v-row justify="center">
        <v-col cols="2">
            <h3>Components</h3>
            <v-card class="componentList">
                <v-card-text>
                    <draggable
                            class="dragArea list-group"
                            :list="listDraggable"
                            :group="{ name: 'components', pull: 'clone', put: false }">
                        <div class="list-group-item" v-for="element in listDraggable">
                            {{ element.name }}
                        </div>
                    </draggable>
                </v-card-text>
            </v-card>
        </v-col>
        <v-col cols="8">
            <h3>Drag & drop</h3>
            <nested-draggable class="dragArea list-group" group="components" :tree="treeList">
            </nested-draggable>
        </v-col>
    </v-row>
</template>

NestedDraggable.vue

    <template>
    <div>
        <draggable class="dragArea list-group" :list="tree" group="components">
            <div class="list-group-item" v-for="el in tree" :key="el.id">
                <!-- Dynamic component depending on component property -->
                <component :is="el.component" :data="el"></component>
                <nested-draggable :tree="el.nodes"/>
            </div>
        </draggable>
    </div>
</template>

例如一个组件 inputTitle.vue

<script>
    export default {
        name: 'inputTitle',
        props: ['data']
    }
</script>

<template>
    <v-row dense justify="space-around">
        <v-col cols="6">
            <!-- how can I bind/save the entered title ? --> 
            <v-text-field placeholder="Enter a title">{{data.title}}</v-text-field>
        </v-col>
    </v-row>
</template>
4

0 回答 0