x-dataの中身を切り出していく試み

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をファイル単位で定義するのではなく、他ファイルをまたいで再利用可能にしていきます。