New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
issue with transition-group
in composition API
#188
Comments
<template #item="{ element }">
<li :key="order">
{{ element.name }}
</li>
</template> |
Hello! Thanks for your answer. Although it doesn't seem to be working for me (could you make it work on the fiddle I provided?). I still have the warning |
Hello, |
Same thing happening to me. Tried to adapt the same transition example for Vue 3. Even tried copy pasting the provided example (using options api) with no modifications, still getting the same error. Bare-bone example: <template>
<draggable
tag="transition-group"
:component-data="{
tag: 'ul',
name: 'flip-list',
}"
:list="exampleValues"
item-key="id"
>
<template #item="{ element }">
<li>{{ element.name }}</li>
</template>
</draggable>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const exampleValues = ref([{
id: 1,
name: 'John',
}, {
id: 2,
name: 'Emily',
}, {
id: 3,
name: 'Rachel',
}, {
id: 4,
name: 'Chris',
}]);
</script>
<style>
.flip-list-move {
transition: all 0.5s ease;
}
</style> Getting the following error:
Running on:
|
I have this error too. Transition does not work in Vue 3 |
Different error message, but might be same problem: First a Vue Warning in the console: Then a solid JavaScript error: Changing the "tag" Property from "transition-group" back to "ul" fixes the errors, but the animation is gone, of course. |
I switched to a forked version of this repo: This fixed the issue for me. If you still get (chinese) error codes in the console, try to translate them with deepl.com – I had to slightly modify my HTML code to make it all work perfectly. |
I have the same problem, and I found the [el] in vNode is 'null' when mounted. |
Hello, do you have any plans to fix this issue |
Hello there - seeing the same problem. Any solutions? |
It is still not solved. In your example, if you delete |
What ultimately worked for me was to remove |
I might be late to the party, but literally removing the tag="transition-group" (as mentioned above) and v-binding the computed "dragOptions" as in the demo, worked for me:
|
its not working for me
and i have this computed :
|
I just ran into the same issue, and I found a way to solve it. The problem seems to be that the <draggable
v-model="data"
handle=".handle"
tag="transition-group"
:component-data="{ tag: 'div' }"
@start="drag = true"
@end="drag = false"
>
<template v-slot:item="{ element }">
<div :key="`section_${element.id}`" :name="!drag ? 'flip-list' : null" class="section-wrapper">
<div class="handle">handle</div>
{{ JSON.stringify(element) }}
</div>
</template>
</draggable> |
Also, you can do like this (from example): <draggable
v-model="myArray"
group="people"
@start="drag = true"
@end="drag = false"
item-key="id"
animation="200"
>
<template #item="{element}">
<div>{{ element.name }}</div>
</template>
</draggable> |
First of all, thanks for the great lib!
Jsfiddle link
https://stackblitz.com/edit/vitejs-vite-tdboa5?file=src/App.vue
Step by step scenario
I am using the composition API with vue 3.
I tried to make a draggable list with transitions, following the example from https://sortablejs.github.io/vue.draggable.next/#/transition-example-2 but adapting it to the composition API. However, I get the following error:
Uncaught (in promise) TypeError: domElement is null
.It seems that the error comes from the
item-key="order"
prop, as if I remove it, or put something different (wich is not a valid key), the error disappears, but I then get the following warning[Vue warn]: <TransitionGroup> children must be keyed.
.My issue seem to be the same than this person : https://stackoverflow.com/questions/72269062/draggable-with-dynamic-groups. But they didn't seem to have got any useful answer.
Am I missing something ?
Thanks!
The text was updated successfully, but these errors were encountered: