如何在 Alpine.js 中编写数组

Question

我有以下代码应该遍历数组以填充 HTML select 元素但得到零数据？

<div class="w-full" x-data="{classes: [
                            {
                            room: 'online',
                            id: 1,
                            },
                            {
                            room: 'in class',
                            id: 2,
                            }
                            ]}">
  <select name="" id="">
    <template x-for="class in classes" :key="class.id">
    <option x-text="class.room" :value="class.room"></option>
      </template>
  </select>
</div>

Answer 1

请检查这个。我将 class 重命名为 cls（可能是 class 单词冲突，但在 concole 中没有看到任何错误）

https://codepen.io/rajdeepdebnath/pen/MWyNoKj?editors=1010

<div class="w-full" x-data="{classes: [
                            {
                            room: 'online',
                            id: 1,
                            },
                            {
                            room: 'in class',
                            id: 2,
                            }
                            ]}">
  <select name="" id="">
    <template x-for="cls in classes" :key="cls.id">
    <option x-text="cls.room" :value="cls.room"></option>
      </template>
  </select>
</div>

如何在 Alpine.js 中编写数组

How to write an array in Alpine.js

alpine.js