【Alpine.js】x-forでプロパティをブン回せ！！

x-forとは

配列またはオブジェクトのプロパティを1つずつ取り出すことができるやつです。

使い方

基本形

<template x-for="単数 in プロパティ名">

templateタグを必ず使うので忘れずに。

使用例①

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>

// 結果
// Red
// Orange
// Yellow

使用例②

ループ回数を出力することもできます。

<template x-for="(単数, index) in プロパティ名">
                       　 ↑ 
         indexを追加するだけでOK。　
        （x-dataでのプロパティ定義は不要）

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="(color, index) in colors">
        <li>
            <span x-text="index + ': '"></span>
            <span x-text="color"></span>
        </li>
    </template>
</ul>

// 結果
// 1: Red
// 2: Orange
// 3: Yellow

まとめ

直感的につかえるindexで番号付きでブン回せるのイイネ👍