Cannot destructure property 'translate' of 'this.draggedElm' as it is undefined about dflex

[jalal246]

Hi @ddenev, you are using it in production mode that's why error messages are not clear. I will try to check it out and get back to you.

[jalal246]

Thanks for sharing the link. I will ship and release it to npm tomorrow.

[ddenev]

Thank you, @jalal246!

[ddenev]

Hi @jalal246,

just updated to v3.9.10 but still have the same error.

[ddenev]

Thank you for the sandbox sample! I noticed that you have added an id prop to the component element

which I did not have in my template.

Adding it to my template removed the error. Without it I still get the same error.

I never met this requirement in the documentation though - that the draggable element should have an id attribute - or maybe I wasn't paying enough attention :)

[jalal246]

It appears that a generated child text node is triggering an error during registration. Given my limited familiarity with Vue, it seems this node is automatically generated by the template.

For instance, this list triggers an error due to the presence of text elements:

NodeList(6) [text, li#item1, li#item2, li#item3, li#item4, text]

The inclusion of non-HTML Element nodes, such as text nodes, can disrupt the expected behavior and potentially lead to errors in the process.

DFlex won't allow it assuming all elements in the same container should be HTML Element.

https://github.com/dflex-js/dflex/blob/927cab38a0580d15b49b4f177e724e0f70c0aa19/packages/dflex-store/src/DFlexBaseStore.ts#L231C1-L259C1

[ddenev]

But there are no text elements in the rendered DOM:

[jalal246]

I know, but if you point to the parent element and then do $0.childNodes you can see there's one. It's an easy fix assuming this is a Vue default behavior and not something that can be addressed within the template itself.

[ddenev]

If it's an easy fix, could you please do it then? There is nothing I can do at my end since indeed, this is how Vue works: vuejs/core#8444

[jalal246]

@ddenev, Are you sure? I made a quick sandbox and it's working: https://codesandbox.io/s/loving-almeida-sst43z?file=/src/components/ListItem.vue

[jalal246]

@ddenev, I should pay more attention to the docs. IDs are required to be unique and should have non-numerical values. So, avoid using an index for IDs.

I'm also working on a Vue playground. I find it much easier to simply copy and paste the code rather than reading the React version.

[ddenev]

Thank you! A Vue playground would be indeed very helpful, looking forward to it.