I am wondering if it is possible in Alpine.js to select all the $refs with the same prefix.
For example if I have a list of divs:
<div>
<div x-ref="tab-1">some random stuff 1</div>
<div x-ref="tab-2">some random stuff 2</div>
<div x-ref="tab-3">some random stuff 3</div>
<div x-ref="tab-4">some random stuff 4</div>
<div x-ref="tab-5">some random stuff 5</div>
<div x-ref="tab-6">some random stuff 6</div>
</div>
Is there anyway to select all the tabs that is starting with "tab-" ? I wanted to do something that is similar to jQuery/QuerySelectorAll
I tried assigning all the tabs with the same reference, but it only seems to return the last element with the reference.
I can access them in individually by using square notation : this.$refs['tab-1'] but I am not sure if there is anyway to do a wildcard selection.
Any kind of advice or discussion is welcome. Thank you.
So after browsing through the the documentation and github help section, wildcard selection might not be available yet on alpine.js.
I believe that this is want I needed:
this.$el.querySelectorAll('#tabs');
Find the original post for more information https://github.com/alpinejs/alpine/issues/252