Как использовать компонент vue3-draggable без сборщиков?

Question

[Антон Росс]

Пытаюсь добавить компонент vueDraggable в свой проект на vue3 написанный на php без сборщиков и прочего. Включаю Draggable через CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-draggable@2.0.9/dist/vue3-draggable.umd.min.js"></script>

Добавляю компонент и монтирую все:

const app = Vue.createApp({});
app.component('draggable', window['vue3-draggable']);
app.mount('#app');

Получаю ошибку:

vue.global.js:2260 [Vue warn]: Component is missing template or render function:  Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}default: components: DraggableItem: name: "DraggableItem"props: {item: ƒ, position: ƒ, containerId: ƒ}containerId: ƒ Number()item: ƒ Object()position: ƒ Number()[[Prototype]]: Objectrender: ƒ (t,e,n,r,o,i)length: 6name: ""prototype: {}arguments: (…)caller: (…)[[FunctionLocation]]: vue3-draggable.umd.min.js:1[[Prototype]]: ƒ ()[[Scopes]]: Scopes[4]setup: ƒ (t,e)__scopeId: "data-v-2fc82866"[[Prototype]]: Object[[Prototype]]: Objectcomputed: {transitionStyle: ƒ}name: "Draggable"props: {transition: {…}, modelValue: ƒ}render: ƒ (t,e,n,r,o,i)setup: ƒ (t,e)__scopeId: "data-v-2fb1486c"[[Prototype]]: Object__esModule: trueSymbol(Symbol.toStringTag): "Module"[[Prototype]]: Object 
  at <Draggable modelValue= (5) [{…}, {…}, {…}, {…}, {…}] onUpdate:modelValue=fn<onUpdate:modelValue> item-key="id" > 
  at <EstateEditGallery> 
  at <EstateEdit key="estate-edit" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="popup" mode="out-in" > 
  at <App>

Как исправить?

Answer 1

[0xD34F]

- app.component('draggable', window['vue3-draggable']);
+ app.component('draggable', window['vue3-draggable'].default);

Comments

[Антон Росс]

Все здорово подключился но дальше беда. В компоненте есть массив (P.S. кусок кода с data)

data(){
        return {
            myArray : [
                {id : 1, name : 'sadasdasd'},
                {id : 2, name : 'sadasdasd'},
                {id : 3, name : 'sadasdasd'},
                {id : 4, name : 'sadasdasd'},
                {id : 5, name : 'sadasdasd'},
            ]
        }
    }

Далее вставляю компонент, но выдает ошибку как будто не видит element никакого.

<draggable v-model="myArray" item-key="id">
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>

vue.global.js:2260 [Vue warn]: Unhandled error during execution of render function 
  at <DraggableItem key=0 item= 
{id: 0, data: Proxy(Object)}
 containerId=0  ... > 
  at <TransitionGroup name="draggable-item-list" > 
  at <Draggable modelValue= 
(5) [{…}, {…}, {…}, {…}, {…}]
 onUpdate:modelValue=fn<onUpdate:modelValue> item-key="id" > 
  at <EstateEditGallery> 
  at <EstateEdit key="estate-edit" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="popup" mode="out-in" > 
  at <App>
vue.global.js:2260 [Vue warn]: Unhandled error during execution of component update 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="popup" mode="out-in" > 
  at <App>
VM28609:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at eval (eval at compileToFunction (vue.global.js:17861:20), <anonymous>:22:69)
    at renderFnWithContext (vue.global.js:2896:15)
    at renderSlot (vue.global.js:5130:55)
    at DraggableContainer.vue:13:9
    at renderFnWithContext (vue.global.js:2896:15)
    at renderSlot (vue.global.js:5130:55)
    at Proxy.<anonymous> (DraggableItem.vue:13:5)
    at renderComponentRoot (vue.global.js:8578:18)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.global.js:7423:48)
    at ReactiveEffect.run (vue.global.js:589:21)

[0xD34F]

Антон Росс, откуда вы взяли, что элемент массива передаётся в слот под именем element?

[Антон Росс]

0xD34F, В документации VueDraggable. Сам делал раньше так

<!-- vue 2 version -->
<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

Теперь пишут заменить на такую штуку через слоты

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
   </template>
</draggable>

В самой документации на Git https://github.com/SortableJS/vue.draggable.next у них весь репозиторий нерабочий кроме sortable, искал версию CDN сам

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>

[0xD34F]

В документации VueDraggable

Антон Росс, понимаю, проще искать где светло, а не где потеряли. Но, как видите, это малопродуктивно. Может, попробуете открыть документацию к тому компоненту, который пытаетесь использовать?

[Антон Росс]

0xD34F, да извиняюсь, это для vue2 репозиторий...случайно не знаете где найти для vuedraggable.next версии?

[0xD34F]

Антон Росс, не знаю, и разговор вообще не об этом. Напоминаю, что вы пытались использовать:

<script src="https://cdn.jsdelivr.net/npm/vue3-draggable@2.0.9/dist/vue3-draggable.umd.min.js"></script>