如何在AlpineJS中使用数组形式的x-ref？

AlpineJS并不支持通过x-ref="link[0]"这种下标格式来创建ref数组，你遇到的undefined问题正是因为这个写法不符合Alpine的ref规则。正确的做法是给多个元素使用相同的ref名称，Alpine会自动将这些元素收集为一个数组。

修正后的代码 #

HTML部分 #

<section x-data="assistant" class="section-space section-space-top-40">
    <div class="container">
        <span x-ref="link">test</span>
        <span x-ref="link">test</span>
    </div>
</section>

Script部分 #

function assistant() {
    return {
        init() {
            // 此时this.$refs.link是包含两个span元素的数组
            console.log(this.$refs.link);
            // 可以通过下标访问单个元素
            this.$refs.link[0].textContent = "changed 0";
            this.$refs.link[1].textContent = "changed 1";
        },
    }    
}

为什么原写法无效 #

你原代码里的x-ref="link[0]"和x-ref="link[1]"会被Alpine识别为两个独立的ref键：'link[0]'和'link[1]'，而非同一个ref下的数组元素。所以this.$refs.link自然返回undefined，如果此时打印this.$refs['link[0]']反而能拿到第一个span元素，但这不是创建ref数组的正确方式。

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