I'm currently facing an issue while trying to integrate the Vue Draggable Component into my existing component. Everything works perfectly fine in my component without the draggable feature, but as soon as I add it, the entire content becomes blank. I suspect that this might be due to a configuration problem. Any guidance or help on this matter would be highly appreciated.
The latest error message I encountered is as follows:
Invalid vnode type when creating vnode: undefined
<template>
<div :class="['image-select']">
<draggable v-model="images">
<div v-for="image in images"
:class="['image-select-image']"
:key="image.id">
<input type="hidden"
:name="fieldName()"
:value="image.id">
<img :src="imageUrl(image,size)" :alt="image.alt">
</div>
</draggable>
</div>
</template>
<script setup>
import {onBeforeMount, ref} from 'vue';
import api from "../modules/api";
import {draggable} from "vuedraggable";
const props = defineProps({
size: {
type: String,
default: 'sm'
},
name: {
type: String,
default: 'images'
},
selectedValues: {
type: Object,
default: null
}
});
const images = ref([]);
onBeforeMount(async () => {
await Promise.all([
setImages()
]);
});
function fieldName(){
return props.name + '[images][]';
}
function imageUrl(image, size){
return image.src.replace(/\/[a-zA-Z0-9_\.-]+(\.[a-zA-Z]+)$/,'/'+size+'$1');
}
function setImages(){
// load images from ids in selectedValues
}
</script>