Topic: MDBSortable not working with v-for

Tobias.Weber priority asked 1 year ago


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'"


Bartosz Cylwik staff answered 1 year ago


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 priority commented 1 year 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 1 year 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.1.1
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes