Changing :options to attributes makes them appear in DOM

[xPaw]

For example, if you have this:

<Draggable
	:list="networks"
	:disabled="isSortingEnabled"
	handle=".lobby"
	draggable=".network"
	ghost-class="network-placeholder"
	group="networks"
	class="networks"

And looking at devtools, the html rendered ends up being this:
<div handle=".lobby" draggable="true" ghost-class="network-placeholder" group="networks" class="networks">

It doesn't sound like a particularly good idea to do this, perhaps valid options should be skipped from DOM if possible?

[David-Desmaisons]

I will correct

[David-Desmaisons]

Corrected in version 2.19,1

[courcelan]

@David-Desmaisons Hi, any way to apply some $attrs to the created element? I use a couple of custom attributes in development, o-base specifically in this case, and this doesn't get applied to the created element like it used to. I see above that the ":options to attributes" was corrected, but now it takes all those attributes and holds on to them.

[David-Desmaisons]

You are correct @courcelan , with this correction, your scenario will be broken. Can you explain better why you pass attributes to the root element?

[courcelan]

Sure! The root element is the containing element and is needed for flex/grid/padding/etc. We use a variation of functional css and a system of attributes mapped to various media queries rather than overload the class attribute with what could be extremely lengthy declaration.

I’ve gotten around the issue by making the root element very “dumb” and is in another containing element that uses the appropriate attributes. However this does call for extra unnecessary markup that would be better served by allowing general attributes to be placed on the root element.

Thanks!

[David-Desmaisons]

You cab make the root element and pass props to it using componnetData props (see for example https://sortablejs.github.io/Vue.Draggable/#/third-party)
THis component will use its props to set attribute on the rrot component.
This solution should address your scenario.

[jbayona89]

I think this may have broken the id prop that is not getting set <Draggable
:list="networks"
:disabled="isSortingEnabled"
handle=".lobby"
draggable=".network"
ghost-class="network-placeholder"
group="networks"
class="networks"
id="myId"

the id="myId" dissapears from the object

[David-Desmaisons]

@jbayona89 you are correct, could you create a dedicated issue for id attribute, please?

[jbayona89]

@David-Desmaisons Already done, #566

[David-Desmaisons]

@courcelan starting with version 2.19,2 id and attribute starting with "data-" will be copied as attribute to the root element. This should address your scenario provided you named them "data-something"

[courcelan]

@David-Desmaisons great. thanks!