Getting some strange render error directly in template DOM #57
Comments
denysaw
changed the title
|
I can not do nothing without at least the template you are using. |
|
Ok. But as I said any simple test templates are failing (all). Example: |
|
What is the exception? |
Console remains empty w/o no exceptions at all. But in browser on a place where component should've been appeared I see that long text I've pasted in the issue description ( |
|
Just FYI: I tried just for test this analog module: https://www.npmjs.com/package/vue-draggable-next and it worked as it should w/o that strange error. So it's not problem of my environment etc. |
|
Having the same error. |
|
@denysaw Do you have a repo with this error? |
|
Same issue here. I'm just trying the example from the README. I changed the name of the var but I doubt that's the issue here. I'm using vue3 with vite. <draggable
v-model="users"
group="people"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{user}">
<div>{{user.name}}</div>
</template>
</draggable>
|
|
Can confirm that I'm getting the same error. I migrated from Vue 2 to Vue 3 and changed my examples according to the docs. Same error as the others. |
|
Alright, so I just figured out that the problem was that I was using the compatibility build via import { configureCompat } from "vue";
configureCompat({
MODE: 3
});I didn't bother figuring out which feature flag exactly causes this behavior but maybe this helps some of you folks out. |
|
I have the same error. I use Vue 3 |
|
Run into this as well. Is there a workaround? |
|
I opened a PR which should resolve this for import Draggable from 'vuedraggable';
const FULLY_COMPATIBLE = { MODE: 3 };
export default function installComponentShims() {
Draggable.compatConfig = FULLY_COMPATIBLE;
}then call |
|
I tried @snoozbuster but still getting error on template |
|
I remove the @vue/compat and other things related to migration build. It is still same |
|
Same error, but strangely I can't get the workaround to work. I'm not even sure where the compat stuff is coming from. I'm using Quasar. |
|
|
|
I remove the compat build completely, project works under the vue 3 but error is still same |
|
This issue is caused when you change the prop name from Simply if you keep the template like this, there will be no issues. <template #item="{ element }">
<div>{{ element.someprop }}</div>
</template>I hope this issue is addressed soon. |
|
@buzzclue is correct. I was able to make it work by using |
|
I was still getting this error even though I use "element" for item slot. My code was like this If you notice there isn't a root element in template and error was related to this issue. I wrap divs with another div and it works :D |
|
@ogulcankarayel5 without root element the error is different but yes you get an error without root element. |
Thanks for this info. Solved the problem for me. |
|
same issue here on Nuxt 3, the draggable component breaks when I set up the |
|
I'm seeing this when migrating a legacy project from Vue 2 to Vue 3. I have no previous Vue experience so I'm not sure what I can provide to help getting to the bottom of this but I can confirm:
|
|
If you want to use a name other than |
|
None of the answers above solved the problem for me in my Nuxt3 project. It turned out that it was all because of the comment at the root of So I replaced this code <template #item="{ element }">
<!-- this comment causes an error -->
<span>{{ element }}</span>
</template>with this: <template #item="{ element }">
<span>{{ element }}</span>
</template>an the error was gone. I hope this helps someone. |
Step by step scenario
Vue 3.1.1 (tried on 3.0.0 first). Following the manual. Trying to use draggable even for simple array in v-model (tried different item-keys), using only item template. Instead of the generated DOM I see this error:
Actual Solution
Didn't think of any workaround yet.
Expected Solution
It should just work as planned.
The text was updated successfully, but these errors were encountered: