Перетаскивание компонентов без использования v-for - PullRequest
Новая
       43

Перетаскивание компонентов без использования v-for

0 голосов
/ 22 июня 2019

EDIT: эта библиотека на самом деле зависит от v-for.Имеет ли смысл создать директиву компилятора, которая будет использоваться следующим образом: 

<render v-for="template in templates" :template="template"> </render>

Тогда массив шаблонов будет просто строкой шаблонов для вызова Vue.compile?Я думаю, что это может не сработать для пользовательских директив.

https://github.com/SortableJS/Vue.Draggable

Я хочу реализовать сетку с элементами, которые пользователь может перетаскивать и перемещать для изменения положения в сетке.Я сделал директиву обёртки вокруг vuedraggable под названием Grid.Затем я создал директиву GridItem, которая добавляет себя в директиву Grid.Я собирался сделать это так, чтобы я мог попытаться переместить компоненты без использования v-for

Grid: 

    <template>
    <draggable :list="gridItems" @start="drag=true" @end="testEnd">
        <slot/>
    </draggable>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        name: 'Grid',
        components: {
            draggable
        },
        props: {
            gridItems: {
                type: Array,
                required: true
            },
        },
        methods: {
            testEnd: function() {
              this.drag = false;
              console.error('onDragEnd', this.gridItems);
            },
            addGridItem: function(item) {
                this.gridItems.push(item);
            },
            getGridItems: function() {
                return this.gridItems;
            }
        },
        provide: function() {
            return {
                addGridItem: this.addGridItem,
                getGridItems: this.getGridItems
            };
        },
        created() {
            console.error('drewzy', this.gridItems)
        }
    }
</script>

GridItem: 

<template>
    <div :key="gkey">
        {{gkey}}
        <slot/>
    </div>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        name: 'GridItem',
        components: {
            draggable
        },
        props: {
            gkey: {
                type: String,
                required: true
            },
        },
        computed: {
            addGridItem: function(item) {
                return this.addGridItem(item);
            },
            getGridItems: function() {
                return this.getGridItems();
            }
        },
        inject: ['addGridItem', 'getGridItems'],
        created() {
            const self = this;
            console.error('key', self.$props.gkey);
            self.addGridItem({
                gKey: self.$props.gkey
            });
            console.error(`gridItem-${self.$props.gkey}`, self.getGridItems())
        }
    }
</script>

MainComponent:

<grid :grid-items="[]" @start="drag=true" @end="drag=false">
        <grid-item :gkey="'test'">
            <ComponentToDragAndDrop1/>
        </grid-item>
        <grid-item :gkey="'test2'">
            <ComponentToDragAndDrop2/>
        </grid-item>
    </grid>

В компоненте Main вместо использования v-for и того, чтобы все в списке, переданном в vuedraggable, отображалось одинаково, я хочу явно перечислить пользовательские компоненты.В приведенном выше примере кода я перечисляю два компонента, которые я хочу отсортировать в vuedraggable.Когда я запускаю приведенный выше код, я вижу, как компоненты перемещаются, когда я перетаскиваю нижний в верхний.Однако после dragEnd они отображаются в той же позиции.Я думаю, это потому, что vue переопределяет всю вещь, а не просто сортирует их в v-for.

...