x-dataのコード量が多くなりすぎた場合に使えます。
おぬぬめ。
前回の続きです
今回はx-dataの中身をscriptタグで囲んで定義する方法で書いてみます。
前回書いたコード
ぽちぽちして表示非表示するヤツ。
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
今回はここを切り出して別のところで定義してみます。
<div x-data="{
open: false,
toggle() {
this.open = ! this.open
},
}">
x-dataを切り出して定義する
# x-dataの中身をtoggleText()で定義する
<div x-data="toggleText()">
<button @click="toggle">表示</button>
<div x-show="open">
やっほー
</div>
</div>
<script>
// toggleTextではreturnを忘れてはならない
const toggleText = () => {
return {
open: false,
toggle() {
this.open = ! this.open
},
}
}
</script>
同じ挙動をします。
See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.
まとめ
これで単一のファイルでx-dataが増えても管理しやすくなりました。
toggle○○とかdropdownみたいなx-dataが増えてもそれぞれ関数で定義してやればいいだけなんす。
次回はx-dataをファイル単位で定義するのではなく、他ファイルをまたいで再利用可能にしていきます。