【Alpine.js】ファイル分割すべきではない
ES moduleで読み込むように設定すると hogeFunctionComponent is not found が大量に発生する
alpine.jsの思想的に小・中規模のアプリケーションで使うので、そもそもファイル分割を想定していない
やるとしたら各html内でscriptに直接関数を書き、 x-data にその関数を渡してあげるのが安全で最適
<div x-data="dropdown">
<button @click="toggle">...</button>
<div x-show="open">...</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = ! this.open
}
}))
})
</script>
dropdownという無名関数を作成し、Alpine.jsに渡している。 関数化したら以下の書き方。
<div x-data="dropdown">
<button @click="toggle">...</button>
<div x-show="open">...</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
function dropdown() {
return {
open: false,
toggle() {
this.open = !this.open;
}
};
}
Alpine.data('dropdown', dropdown);
})
</script>
こっちの方がシンプルで再利用性がありそう。