SortableJS / Vue.Draggable

Vue drag-and-drop component based on Sortable.js
https://sortablejs.github.io/Vue.Draggable/
MIT License
20.19k stars 2.9k forks source link

TypeError: Cannot read properties of undefined (reading 'class') #1227

Open lucapu88 opened 1 year ago

lucapu88 commented 1 year ago

Hi, I'm getting this error: TypeError: Cannot read properties of undefined (reading 'class') at http://localhost:5173/src/components/todo-list/Todo.vue?t=1697039040971:87:28 at renderFnWithContext (http://localhost:5173/node_modules/.vite/deps/chunk-WI6DU6SK.js?v=16a2b26b:2316:13) at http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?v=10cbeeac:11988:26 at Proxy.flatMap () at computeNodes (http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?v=10cbeeac:11987:51) at computeComponentStructure (http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?v=10cbeeac:12019:29) at Proxy.render (http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?v=10cbeeac:12106:46) at renderComponentRoot (http://localhost:5173/node_modules/.vite/deps/chunk-WI6DU6SK.js?v=16a2b26b:2364:17) at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:5173/node_modules/.vite/deps/chunk-WI6DU6SK.js?v=16a2b26b:6486:46) at ReactiveEffect.run (http://localhost:5173/node_modules/.vite/deps/chunk-WI6DU6SK.js?v=16a2b26b:1427:23)

the component is as follows:

<template v-for="(todo, n) in todosStore.todos" :key="n">
    <draggable
      class="drag-n-drop"
      id="draggable"
      v-model="todosStore.todos"
      @start="
        drag = true;
        todosStore.removeSelectedCategoryToAddItem();
      "
      @end="
        drag = false;
        todosStore.saveTodos();
      ">
      <template #item="{ todo }">
        <div
          id="draggable-children"
          class="todo-n"
          :class="{
            category: todo.class,
            'category-retro': todo.class && theme.retroTheme,
            'category-minimal': todo.class && theme.minimalTheme,
          }">
          <div v-if="todo.class && theme.minimalTheme"
            class="category-emoji-minimal">
                {{todo.name}}
           </div >
         </div >
     </template>
  </draggable>
</template>

What is wrong? is it not possible to insert classes inside the template? it seems strange to me, because with the old version it made me do it...