v-for cannot create draggable component

[oinkbark]

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)

[oinkbark]

I looked at the library code and it was counting a comment as another slot node. Removing the comment fixed the issue.

[David-Desmaisons]

Could share the template that has the problem and the corrected template? thanks.

[oinkbark]

Working:

<template lang='pug'>      
my-other-component(v-for='(SectionValue, SectionName, SectionIndex) in Form.sections')
  template(v-slot:my-other-component-slot)
    div(v-if='!SectionValue.data') No Data
    draggable(v-else v-model='Form.sections[SectionName].data' :group='{ name: SectionName }' item-key='id' @start='dragging=true' @end='dragging=false')
      template(v-slot:item='{ element, index }')
        div {{ element.text }}
</template>

Error: "Item slot must have only one child". It is the exact same code as above but with a pug inline comment.

<template lang='pug'>      
my-other-component(v-for='(SectionValue, SectionName, SectionIndex) in Form.sections')
  template(v-slot:my-other-component-slot)
    div(v-if='!SectionValue.data') No Data
    draggable(v-else v-model='Form.sections[SectionName].data' :group='{ name: SectionName }' item-key='id' @start='dragging=true' @end='dragging=false')
      template(v-slot:item='{ element, index }')
        div {{ element.text }}
        // This is a pug inline comment
</template>

Error: "normalizedList.flatMap is not a function"

I do not remember how I got this error.

[lamka02sk]

I just hit the same error. It is indeed a problem with template or even if v-for is called on child component. I think this should be solved.

[denysaw]

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

[pavellzubkov]

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>

[ddmy]

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>

是这样的

[ashtacore]

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>

That is such a silly error and solution but you just saved me from two days of pulling my hair out. Thank you!

[4EPHblN]

When JSON received it would converted to Object instead of Array if indexes is not in sequence as on screenshot.

[oladetoungee]

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

[4EPHblN]

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.

[Guyu23]

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>

I just solved the same problem with your method, Thank you!