Задать вопрос
rosssjawake

Антон Росс

Основатель Matomba.ru
Комментарии

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

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

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

    rosssjawake
    @rosssjawake Автор вопроса
    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>
    Написано

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

    rosssjawake
    @rosssjawake Автор вопроса
    Все здорово подключился но дальше беда. В компоненте есть массив (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)
    Написано