Accessing $id in a component's init function #4171
Replies: 1 comment 3 replies
-
|
Yes, you are correct. init runs before all the other directives are computed (except for x-data). It's kind of the equivalent to the old beforeMount in VueJs/React. If you want to do it after (aka component mounted), nextTick is the right solution. AN alternative solution is to use id in x-data |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for confirming. Could you explain a little more what you mean by "use id in x-data" as an alternative? |
Beta Was this translation helpful? Give feedback.
-
|
As shown in the first example here but I'm not sure it would play nicely with Alpine.data. I'd stick to nextTick |
Beta Was this translation helpful? Give feedback.
-
Understood - thanks :-) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm using
$idto generate unique ids, and it's working fine in that respect.However, I'd like to access the id when the component is initialised, and that doesn't quite work as I expected.
See the example code below. In the component's
init()function, it logsthis.$elto the console, which shows that the id has been generated:<div x-data="block" :id="$id('block')" id="block-1">Block 1</div>Then it logs
this.$el.id, which I expect to showblock-1, but it's an empty string.As per the code below, I can use
$nextTickto logthis.$el.id, in which case it does show the correct value for the id.Is
$nextTickthe best solution, or have I misunderstood something about the sequence of events?Beta Was this translation helpful? Give feedback.
All reactions