Topic: MDBSortable not working with v-for
I want to use https://mdbootstrap.com/docs/vue/plugins/drag-and-drop/#section-sortable-basic-example in my project
Expected behavior Drag and drop is working with a dynamic v-for list.
Actual behavior Drag and Drop is not working with a v-for in MDBSortableItem. The static example from the mdb documentation is working on my site.
Resources (screenshots, code snippets etc.)
<MDBSortable>
<MDBSortableItem v-for="item in approverList" :key="item.id">{{
item.name
}}</MDBSortableItem>
</MDBSortable>
I cannot create a mdb snippet it seams no plugins are available. I get the error message: " Could not find dependency: 'mdb-vue-drag-and-drop' relative to '/src/App.vue'"
Hi! Snippets with plugins are not working in Vue right now.
Does the component not work for you at all? Does it show any errors? Can you see if the code bellow is working for you? I pushed a demo app to mdbgo ( https://b-cylwik-drag-and-drop.mdbgo.io/ ) and cannot reproduce your problem.
<template>
<section class="border p-4 d-flex justify-content-center mb-4">
<MDBSortable>
<MDBSortableItem v-for="item in approverList" :key="item.id">{{
item.name
}}</MDBSortableItem>
</MDBSortable>
</section>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
const approverList = ref([
{ id: 0, name: "name 0" },
{ id: 1, name: "name 1" },
{ id: 2, name: "name 2" },
{ id: 3, name: "name 3" },
]);
</script>
<style>
.sortable-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: #fff;
border-radius: 4px;
}
.sortable-item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
user-select: none;
}
</style>
Tobias.Weber pro premium priority commented 2 years ago
The component work for me.
I get the following information in the console: mdb-vue-drag-and-drop.es.min.js:259 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Your code is working for me. But if you add an item with:function add() { approverList.value.push({ id: 4, name: 'name new' })} The drag of the new item is not working for me.
Bartosz Cylwik staff commented 2 years ago
To add a new element to the sortable list there is a addItem method in a MDBSortable component but from what I can see there is a problem with that right now. We will try to fix that as soon as possible.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 3.1.1
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes