Vue. js рекурсивные и редактируемые компоненты - PullRequest
Новая
       73

Vue. js рекурсивные и редактируемые компоненты

0 голосов
/ 23 марта 2020

Я работаю над HTML Builder GUI в vue. js, и я застрял с обновлением рекурсивного компонента.

У меня есть два перетаскивания в моем главном файле Home. vue, один список доступных компонентов (заголовок, вопрос, текст ...), другой, где вы добавляете и клонируете эти компоненты. Эта область перетаскивания также перетаскивается для своих внутренних компонентов (вопрос может привести к другому вопросу или тексту и т. Д. c.). Я использую vue -draggable библиотеку и вложенный-перетаскиваемый рекурсивный компонент для достижения этой цели.

Моя проблема в том, что каждый компонент редактируемый, и я просто не знаю, как сохранить эти изменения. Поскольку я передаю данные дерева в качестве подпорки, я не могу изменить их в дочернем элементе, и я не уверен насчет $ emit для родительского элемента, поскольку компонент является рекурсивным ... Все примеры, которые я могу найти, относятся к простые деревья с фиксированными данными.

Каков наилучший способ добиться этого? Является ли Vuex хорошей идеей (если да, есть ли где-нибудь пример, потому что я не знаю, с чего начать)?

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