Alpine.js中能否通过通配符选择带有相同前缀的$refs？

Alpine.js获取相同前缀$refs的实现方法 #

Alpine.js本身没有提供通配符选择$refs的内置API，但可以通过原生JS遍历$refs对象轻松实现该需求。

方法1：直接筛选$refs对象键名（最便捷）

$refs本质是存储了所有ref名和对应DOM元素的普通对象，你可以直接遍历它的键名，匹配指定前缀即可：

// 在Alpine组件的方法内使用
const tabRefs = Object.entries(this.$refs)
  .filter(([refName]) => refName.startsWith('tab-'))
  .map(([_, domElement]) => domElement)

执行后tabRefs就是所有x-ref以tab-开头的DOM元素数组，完全匹配你要的类似querySelectorAll的效果。

补充说明：你之前给所有tab设置相同引用只能拿到最后一个元素，是Alpine的设计预期：同名x-ref会被后渲染的元素覆盖，单个ref名始终对应单个DOM元素。

方法2：自定义属性选择（更适合复杂场景）

如果你需要更灵活的筛选，也可以给所有tab元素加一个自定义标识属性，比如data-tab-item：

<div> 
  <div x-ref="tab-1" data-tab-item>some random stuff 1</div>
  <div x-ref="tab-2" data-tab-item>some random stuff 2</div>
  <!-- 其余tab同理 -->
</div>

之后在组件内直接通过根元素查询即可：

const tabRefs = Array.from(this.$el.querySelectorAll('[data-tab-item]'))

内容的提问来源于stack exchange，提问作者user2232355