javascriptvuejs3vuedraggable

Vue3-Draggable - Fetch Object List


I feel i must be very close to gettign this working, all I did was clone the original project from github and change the awway it creates to my own fetch request. When I set it as an array I see my items in the bottom :

<pre>{{ JSON.stringify(returnedItems, undefined, 4) }}</pre>

But they do not appear in the draggable content section. I do see in the Vue Development Tools that I have data as a normal array.

I plan on changing this to an object array tho so thatll be the next step after i get an normal array working.

<template>
  <div class="container">
    <div class="left">
      <draggable
        v-model="returnedItems"
        transition="100"
        class="drop-zone"
      >
        <template v-slot:item[0]="{ item  }">
          <div class="draggable-item">
            {{ item }}   <!-- item.title -->
          </div>
        </template>
      </draggable>

      <pre>{{ JSON.stringify(returnedItems, undefined, 4) }}</pre>
      <!-- <pre>{{ JSON.stringify(items1, undefined, 4) }}</pre> -->
    </div>

    <div class="right">
      <draggable
        v-model="items2"
        transition="100"
        class="drop-zone"
      >
        <template v-slot:item="{ item }">
          <div class="draggable-item">
            {{ item.title }}
          </div>
        </template>
      </draggable>

      <pre>{{ JSON.stringify(items2, undefined, 4) }}</pre>
    </div>
  </div>
</template>

<script>
import Draggable from "./components/DraggableContainer";
import { ref } from 'vue';
export default {
  name: "Sample",
  components: {
    Draggable
  },
  data() {
    return {
      items1: Array(5)
        .fill({})
        .map((_, index) => ({ title: `Item ${index + 1}` })),
      items2: [],
      returnedItems: ref([]),
    };
  },
  mounted() {
    fetch("http://localhost:5081/Install/GetInstall")
      .then((response) => {
        if (!response.ok){
          console.log("Error");
        }
        // console.log(response.data);
        // var sideelement = Array.from(response);
        // console.log(sideelement);
        return response.json();
      })
      .then((data) => {
        this.returnedItems = data;
        console.log(data);
        console.log("Items: " + this.returnedItems);
      })
      .catch((error) => {
        console.error("Catch Error: ", error);
      })
  }
};
</script>

Solution

  • Here is my answer.

    <template>
        <div class="container ">
            <h1>Draggable</h1>
            <draggable v-model="list"
                       group="people"
                       @start="drag=true"
                       @end="onDragEnd"
                       item-key="id"
                       class="drop-zone scrolling">
                <template #item="{element}">
                    <div class="draggable-item">{{element.fileName}}</div>
                </template>
            </draggable>
        </div>
    </template>
    
    <script>
      import { ref } from 'vue'
      import draggable from 'vuedraggable'
      
    
      export default {
            components: {
                draggable,
            },
            setup() {
                const list = ref([]);
                const drag = ref(false);
                const onDragEnd = (evt) => {
                    console.log("Reordered: ", list.value);
                }
                return {
                    drag,
                    list,
                    onDragEnd
                };
            },
     mounted() {
                fetch("http://localhost:5081/Install/GetInstall")
                  .then((response) => {
    return response.json();
    })
                  .then((data) => {
                    this.list = data;
    })
    }
    };
    </script>