AHA Stack を試したい(9) Alpine.js編
kenp前回に続いて、Alpine.js について試していきます。
今回のチュートリアルは少し複雑になっています。
完成形としては、入力欄に入力した文字列により下部の要素がフィルタリングされて表示される、というものです。
まずはコードから
---
---
<html>
<head>
</head>
<body>
<div
x-data="{
search: '',
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
>
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>
</body>
</html>x-modelについて
inputタグに x-model が指定されています。このsearchが x-data のsearch とバインディングされます。
つまり、入力欄の文字を x-data に渡していることになります。
items について
ただの文字列の配列ですが、プロパティとして、外部からはアクセスしないようです。
filteredItems について
filteredItems という getter が定義されています。
急にオブジェクト指向が出てきました！
startsWith は、文字列が引数で指定された文字列で始まるかを判定して true か false を返します。
つまり、itemsに対してsearchで入力した文字列から始まったらtrueとなり、trueのitemのみ表示するということになります。
x-for について
要素 in 要素の配列 という形式をとり、要素数分ループします。
要素の配列、と書きましたが、今回のコードでは getterであるfilteredItems を指定しています。
オブジェクトなしに getter を使うというのが少し違和感がありますが、こういう書き方のようです。
初期表示
b と入力すると、bから始まるbar, bazのみに絞り込まれます。
＼ 最新情報をチェック ／
