Draggable Vue component-CodePudding

I'm trying to implement this vue draggable component within my component. My component works fine without the draggable component, but once draggable is added everything is blank. I'm thinking that it is a configuration issue. Any assistance would be appreciated.

The most recent error I'm getting is

Invalid vnode type when creating vnode: undefined

<template>
<div :>
  <draggable v-model="images">
    <div v-for="image in images"
         :
         :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>

CodePudding user response：

According to the documentation, you're supposed to import without curly braces {}

import draggable from 'vuedraggable';

Based on how the vuedraggable component is exported, using the curly braces will make the import fail.

See this codesandbox example