No Vue 3 support #935

tm19original · 2020-10-08T11:24:37Z

In Vue 3 the following error appears:

vuedraggable.common.js?310e:2006 Uncaught (in promise) TypeError: Cannot read property 'header' of undefined
    at getSlot (vuedraggable.common.js?310e:2006)
    at computeChildrenAndOffsets (vuedraggable.common.js?310e:2012)
    at Proxy.render (vuedraggable.common.js?310e:2121)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
    at processComponent (runtime-core.esm-bundler.js?5c40:4376)

Would be nice to have Vue 3 support.

The text was updated successfully, but these errors were encountered:

steffchep · 2020-10-08T15:14:23Z

Not sure it's related to vue3 - but in my vue3 app I get "Uncaught (in promise) TypeError: scopedSlot is undefined" in vuedraggable.common.js
(In my setup, I'm async-loading some data that is supposed to go into the draggable)

educkf · 2020-10-09T09:51:01Z

I've been having a lot os problems with Vue3 too. Had this header error from @tm19original and also lots of Error: Maximum recursive updates exceeded..

educkf · 2020-10-09T09:55:14Z

This plugin seems to work though: https://github.com/anish2690/vue-draggable-next

David-Desmaisons · 2020-10-09T13:04:15Z

Hello, I will start working on this this week-end. Closing this issue as dup of issue #881

roxanarahimi · 2022-01-02T20:06:43Z

in vue 3 you should use draggable library as below:

install:
npm i -S vuedraggable@next

impotr:
import Draggable from 'vuedraggable';

use:
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>

and this is the link with full examples:
https://github.com/SortableJS/vue.draggable.next

MostafaSaadatnia · 2022-07-19T05:29:04Z

in vue 3 you should use draggable library as below:

install: npm i -S vuedraggable@next

impotr: import Draggable from 'vuedraggable';

use: <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id"> <template #item="{element}"> <div>{{element.name}}</div> </template> </draggable>

and this is the link with full examples: https://github.com/SortableJS/vue.draggable.next

Its not working

AaronConlon · 2022-07-20T02:38:29Z

in vue 3 you should use draggable library as below:

install: npm i -S vuedraggable@next

impotr: import Draggable from 'vuedraggable';

use: <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id"> <template #item="{element}"> <div>{{element.name}}</div> </template> </draggable>

and this is the link with full examples: https://github.com/SortableJS/vue.draggable.next

It's work.Thanks.

mitya33 · 2022-09-21T17:37:36Z

Just tried this today, with Vue 3, using as per readme's installation/instructions. Getting scopedSlot is undefined error still.

aleksadjeka · 2022-10-18T10:43:57Z

@MostafaSaadatnia Maybe it's related to your #item name
I had same problem when I put #item="{item}" try to use different name :)

ahmadaldabouqii · 2022-12-06T11:18:02Z

in vue 3 you should use draggable library as below:

install: npm i -S vuedraggable@next

impotr: import Draggable from 'vuedraggable';

use: <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id"> <template #item="{element}"> <div>{{element.name}}</div> </template> </draggable>

and this is the link with full examples: https://github.com/SortableJS/vue.draggable.next

it worked for me, thanks <3

jesuskostov · 2023-02-09T16:01:12Z

Be sure you are using the word "element"

markosole · 2023-04-01T01:17:12Z

Works like charm. I am just finding it difficult to use with nested components, example:

App.vue

<draggable v-model="agregator.bookmarks" ghost-class="ghost" group="people" @start="drag=true" @end="dragEnded" :move="checkMove" item-key="id">
  <bookmark-card #item="{element}">
    <!-- component is loaded here, expecting to render  -->
  </bookmark-card>
</draggable>

BookmarkCard.vue

<!-- <template #item="{element}">   < This does not work!  -->
<template>
  <li class="p-2 mb-3 m-1.5 flex items-center bg-gray-900 shadow rounded-lg single-bookmark hover:bg-green-500">
      <div class="items-center">
          <span class="absolute text-white font-small text-sm">{{ element.bookmark_name}}</span>
        </div>
    </li>
</template>

<script>
export default {
  components: {
  // extra few other components
  },
  props: {
    bookmark: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    editBookmark() {
      this.$parent.editBookmarkParent(this.element);
    },
  }
}
</script>

This does not work and I am getting Error: draggable element must have an item slot Error. Does anyone have any clue why that may be? - I am using VUE 3 and I've tried by placing `#item="{element}"´on the side of component and all other variations but no joy.

markosole · 2023-04-01T01:55:41Z

Just quick update with solution for probelm above and nested components. Again I am using VUE 3 here.

App.vue

<draggable v-model="agregator.bookmarks" ghost-class="ghost" group="people" @start="drag=true" @end="dragEnded" :move="checkMove" item-key="id">
  <template #item="{element}">
    <bookmark-card :bookmark="element">
    </bookmark-card>
  </template>
</draggable>

The key part is adding <bookmark-card :bookmark="element"> as :bookmark cast into component.

Then it can be used inside of component as:

BookmarkCard.vue

<template>
  <li class="p-2 mb-3 m-1.5 flex items-center bg-gray-900 shadow rounded-lg single-bookmark hover:bg-green-500">
      <div class="items-center">
          <button @click="editBookmark" type="button" class="bookmark-edit h-6 w-6 text-white bg-green-700 dark:hover:bg-green-800 font-medium rounded-lg text-sm text-center dark:bg-green-600 dark:hover:bg-gray-600">
            <svg class="w-4 h-4 dark:text-white m-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
          </button>
          <span class="absolute text-white font-small text-sm">{{ bookmark.bookmark_name}}</span>
        </div>
    </li>
</template>
<script>
import Avatar from "vue3-avatar";
export default {
  components: {
    Avatar,
  },
  props: {
    bookmark: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    editBookmark() {
      //  To exit draggable component and reach App.vue parent method, add $parent.$parent twice
      this.$parent.$parent.editBookmarkParent(this.bookmark);
    },
  }
}
</script>

AdrienZianne · 2023-04-13T20:34:30Z

in vue 3 you should use draggable library as below:

install: npm i -S vuedraggable@next

impotr: import Draggable from 'vuedraggable';

use: <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id"> <template #item="{element}"> <div>{{element.name}}</div> </template> </draggable>

and this is the link with full examples: https://github.com/SortableJS/vue.draggable.next

I don't understand where i should put that for the nested list (the link just point the repo, not even the example folder).

kokiok3 · 2023-06-23T05:28:35Z

in vue 3 you should use draggable library as below:

install: npm i -S vuedraggable@next

impotr: import Draggable from 'vuedraggable';

use: <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id"> <template #item="{element}"> <div>{{element.name}}</div> </template> </draggable>

and this is the link with full examples: https://github.com/SortableJS/vue.draggable.next

I just did...

npm uninstall [package name]
npm i -S vuedraggable@next
Then it works. Thanks!

mohamed-mousa · 2023-06-24T08:41:44Z

It's work.Thanks.

blessedmadukoma · 2023-07-18T17:17:07Z

How I solved my draggable componets issue:

IvanRozb · 2024-03-19T09:09:10Z

Update version of vuedraggable. "vuedraggable": "4.1.0"

tm19original changed the title ~~No Vue 3 suport~~ No Vue 3 support Oct 8, 2020

David-Desmaisons closed this as completed Oct 9, 2020

markosole mentioned this issue Apr 1, 2023

Is it possible to add addition components within the Draggable slot? #1196

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No Vue 3 support #935

No Vue 3 support #935

tm19original commented Oct 8, 2020

steffchep commented Oct 8, 2020 •

edited

Loading

educkf commented Oct 9, 2020

educkf commented Oct 9, 2020

David-Desmaisons commented Oct 9, 2020

roxanarahimi commented Jan 2, 2022 •

edited

Loading

MostafaSaadatnia commented Jul 19, 2022

AaronConlon commented Jul 20, 2022

mitya33 commented Sep 21, 2022

aleksadjeka commented Oct 18, 2022

ahmadaldabouqii commented Dec 6, 2022

jesuskostov commented Feb 9, 2023

markosole commented Apr 1, 2023 •

edited

Loading

markosole commented Apr 1, 2023

AdrienZianne commented Apr 13, 2023 •

edited

Loading

kokiok3 commented Jun 23, 2023

mohamed-mousa commented Jun 24, 2023

blessedmadukoma commented Jul 18, 2023

IvanRozb commented Mar 19, 2024

No Vue 3 support #935

No Vue 3 support #935

Comments

tm19original commented Oct 8, 2020

steffchep commented Oct 8, 2020 • edited Loading

educkf commented Oct 9, 2020

educkf commented Oct 9, 2020

David-Desmaisons commented Oct 9, 2020

roxanarahimi commented Jan 2, 2022 • edited Loading

MostafaSaadatnia commented Jul 19, 2022

AaronConlon commented Jul 20, 2022

mitya33 commented Sep 21, 2022

aleksadjeka commented Oct 18, 2022

ahmadaldabouqii commented Dec 6, 2022

jesuskostov commented Feb 9, 2023

markosole commented Apr 1, 2023 • edited Loading

App.vue

BookmarkCard.vue

markosole commented Apr 1, 2023

App.vue

BookmarkCard.vue

AdrienZianne commented Apr 13, 2023 • edited Loading

kokiok3 commented Jun 23, 2023

mohamed-mousa commented Jun 24, 2023

blessedmadukoma commented Jul 18, 2023

IvanRozb commented Mar 19, 2024

steffchep commented Oct 8, 2020 •

edited

Loading

roxanarahimi commented Jan 2, 2022 •

edited

Loading

markosole commented Apr 1, 2023 •

edited

Loading

AdrienZianne commented Apr 13, 2023 •

edited

Loading