Issues with id bind

[jadersbr]

Hi everyone,

I'm using Laravel and blade components to create reusable components.

I'm trying to bind id dynamically, when component is initialized, but without success.

My blade component code is

<x-general.choices data-id="choicejs-categories" data-receiver="posts" />

<div {{ $attributes }} x-data="$store.choicesData()" @datareceiver.window="setData($event.detail)">
    <select :id="choicesjsId" class="my-js-choice form-control"></select>
</div>

My Alpine code is

document.addEventListener('alpine:init', () => {
   Alpine.store('choicesData', function () {
      return {
         choicesjsId: '',
         init () {
            this.choicesjsId = this.$root.dataset.id;
            console.log(this.choicesjsId);
            console.log(document.getElementById(this.choicesjsId));
         }

The output is:

choicejs-categories
null

Note that when I do console.log(document.getElementById(this.choicesjsId)); null is returned.

What am I doing wrong? Because is null I can't initialize choicesjs plugin.

Any tips?

Regards

[leobm]

doesn't x-data have to be defined like this?
x-data="$store.choicesData"

so not as a function call?

[jadersbr]

x-data="$store.choicesData()" works well. My problem is to get element by dynamic id.

[SimoTod]

I don't think you can use a store in that way. The $root helper won't really work inside a store. You probably want Alpine.data instead

[jadersbr]

I can get the root data, note that when I execute console.log(this.choicesjsId) it brings the value choicejs-categories.

I can't pass this value to the id of the select element....

[SimoTod]

It might work by chance, however, that's not the reason why stores exist. The purpose of a store is to provide a piece of reactive data that can be shared between components and also accessed externally, you never assign the full store to a component but use $store on specific directives or event listeners when needed (See https://alpinejs.dev/magics/store). Returning a factory (a function that returns a new copy of the data) defeats the purpose of the store because data won't be shared. Later on, you'll be tricked by other tutorials and examples on the internet using a store in the right way and you'll waste time trying to figure out why it doesn't work for you.
If you need to define a scope for a component, the right function is Alpine.data.

That being said, if you inspect the HTML, you'll see that the id is bound correctly. You are just printing out the value too early. Dom elements are evaluated top to bottom, when Alpine processes the div, it hasn't processed the select element yet.

init runs when x-data is initialised. if you want to wait for the full component to be initialised you can use $nextTick inside the init function: https://codepen.io/SimoTod/pen/XWVMPMb

[jadersbr]

Thank you very much @SimoTod for such complete explanation. I read your code and applied to my code. This worked very well. Now I am able to implement several choicesjs in the same page.