Сохранить данные компонента между списками - PullRequest
Новая
       28

Сохранить данные компонента между списками

0 голосов
/ 03 ноября 2019

У меня есть компонент, который содержит два «списка», которые заключены в контейнер Vuedraggable. Элементы в списке являются «компонентами» - идея заключается в том, что они могут быть заменены для различных компонентов в будущем. Я обнаружил, что при перемещении элемента из одного списка в другой данные, связанные с этим компонентом, не переносятся, хотя это происходит, если он остается в том же списке, и порядок изменяется. Существует ли какой-либо способ сохранения данных при перемещении из одного списка в другой?

Списки 

<template>
    <draggable v-model="items" group="twolists">
        <component v-for="item in items" :key="item.id" :is="item.component" v-bind="item.props"></component>
    </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
    props: [
        'name'
    ],
    components: {
        draggable
    },
    data()
    {
        return {
            items: [
                {
                    id: 1 + this.name,
                    component: 'simple-component-1',
                    props: {
                        message: 'hello'
                    }
                },
                {
                    id: 2 + this.name,
                    component: 'simple-component-1',
                    props: {
                        message: 'hello again'
                    }
                }
            ]
        }
    }
}
</script>

простой компонент 

<template>
    <div class="box" style="padding:5px;outline:1px dashed blue">
        <p contenteditable>{{message}}</p>
    </div>
</template>

<script>
export default {
    props: [
        'message'
    ],
    data()
    {
        return {
            msg: ''
        }
    },
    mounted()
    {
        this.msg = this.message
    }
}

index.html 

    <div id="app"> 
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <simple-list name="one"></simple-list>
                </div>
                <div class="col-6">
                    <simple-list name="two"></simple-list>
                </div>
            </div>
        </div>
    </div>
...