How can I save order of v-cards when using vue draggable?

297 Views Asked by At

I designed a site using Vue, Vuetify, and implemented Draggable really late in the development of my application and used it as follows:

 <draggable v-model="dragitems" class="v-card" handle=".handle">
    <v-row>
        <v-col>
            <v-card>
            <v-card-title class="text-button"><v-icon color="#8cd0ff" class="handle">mdi-drag</v-icon>Title 1</v-card-title>
            </v-card>
        </v-col>
    </v-row>
    <v-row>
        <v-col>
            <v-card>
            <v-card-title class="text-button"><v-icon color="#8cd0ff" class="handle">mdi-drag</v-icon>Title 2</v-card-title>
            </v-card>
        </v-col>
    </v-row>
 </draggable>

This works exactly how I want for dragging around cards. There is a handle on each card and all of them response as expected; however, I am wondering how I can save the order of these cards without totally revamping my code, or if its even possible. My implementation of this doesn't seem to align with any of the Draggable documentation examples. Any ideas on how to save the order of v-cards, so they can be reloaded later in the same order?

Thanks

0

There are 0 best solutions below