v-for cannot create draggable component

See original GitHub issue

Details:

Im trying to use v-for to dynamically create draggable components. It worked fine with Vue 2. Now on vue 3 I always get one of these two errors:

Errors:

TypeError: normalizedList.flatMap is not a function
    at computeNodes (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4607:37)
    at computeComponentStructure (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4646:15)
    at Proxy.render (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4767:32)
    at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:828:44)
    at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4294:53)
    at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
    at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)

Error: Item slot must have only one child
    at computeNodes (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4621:11)
    at computeComponentStructure (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4646:15)
    at Proxy.render (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4767:32)
    at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:828:44)
    at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4294:53)
    at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
    at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
pavellzubkovcommented, Nov 24, 2021

Getting the same problem ( Without any v-for loops (

This error happens (in my case) when template have commented elements.

don’t work:

<template #item="{ element }">
          <div>
            {{ element }}
          </div>
          <!--          <div>aasdf</div>-->
</template>

work:

<template #item="{ element }">
          <div>
            {{ element }}
          </div>    
</template>
0reactions
4EPHblNcommented, Sep 12, 2022

It worked at first and then I moved my array to my store and I started to get this error TypeError: normalizedList.flatMap is not a function

Try to check the type of data that is returns from your store, maybe it is Proxy or other, but not an Array.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue render function for draggable. How can I add v-model
I cannot find how to add v-model to draggable component in Vue2. found some example in documentation, but it doesn't work.
Read more >
Create draggable components with React-Draggable
In this tutorial, we'll explore React-Draggable in depth by creating a task list with draggable components. Let's get started!
Read more >
Building draggable interfaces with Vue.js and Tailwind
For drag and drop support we're going to use Vue Draggable which is an awesome library (wrapper over SortableJS) that exposes a component...
Read more >
React Draggable Components: A Complete Guide - Copycat
The Complete Guide to React Draggable Components ... Controlled vs. ... To make an element or a component draggable in our React application ......
Read more >
HTML Drag and Drop API - W3Schools
First of all: To make an element draggable, set the draggable attribute to true: ... By default, data/elements cannot be dropped in other...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found