如何用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>