Alpinejsのx-forで配列を回してinputを表示し、button押下で要素の追加や削除するケースはよくあると思う。

html

<div x-data="{items: ['A', 'B', 'C']}">
    <template x-for="(item, index) in items">
        <div class="item">
            <input name="`item[${index}]`" x-model="item">
        </div>
    </template>
    <button type="button" @click="items.push('')">追加</button>
</div>

上記のようにすると、追加ボタンを押したときにそれまでに入力した情報は初期化されてしまう。
原因はx-modelでディレクティブしている対象がx-forで新しく代入したitemになっている点と思われる。

html

<div x-data="{items: ['A', 'B', 'C']}">
    <template x-for="(item, index) in items">
        <div class="item">
            <input name="`item[${index}]`" x-model="items[index]">
        </div>
    </template>
    <button type="button" @click="items.push('')">追加</button>
</div>

itemsにindexを渡すことで正しく親のデータが書き換えられ、pushで追加したときもそれまでのデータが保持されるようになる。

以上備忘録。（数時間苦しんだ）