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