Use Alpine.data directly on an element.

[zraly]

I needed to apply Alpine.data() to an element, but there was a problem. The element was created by javascript (const newElement = document.createElement('div')). It still worked when I attached the x-data parameter to this element (newElement.setAttribute('x-data','Hello')), but the problem was with the composition of these Hello identifiers. For example, if I wanted to create more than one such element, I would need to have some sort of generator of their names.

Wouldn't it be much better to use the Alpine.data() directly on the element like this?:

<script>
    const newElement = document.createElement('div');
    document.addEventListener('alpine:init', () => {
        Alpine.data(newElement, () => ({
            open: false,
 
            toggle() {
                this.open = ! this.open
            }
        }))
    })
</script>

[ekwoka]

There is already technically an API to do this exposed on the Alpine global addScopeToNode which naturally accepts the element and an object to use as data.

Or you can inline the object into the x-data field regardless.

I'm not sure why you think you'd need to generate more names if it's all the same data anyway? you can just put the same data expression on multiple components.

[zraly]

The reason was I needed to apply it on something like

<select x-data='smth'></select>

(it created new div as a sibling)

But I solved it with

<div x-data='smth'>
  <select></select>
</div>

which put all the thing into one data element and is probably better approach.