[Vue.js] v-ifを複数要素まとめて一括で適用したい

Vue.jsの理解がまだまだ浅いので備忘録。

v-if の基本

v-ifはディレクティブと呼ばれるものの1つで、基本的には1つの要素に対して記述します。
ディレクティブとはなんぞや？という人は、公式ドキュメントをどうぞ。 ⇒ Vue.js ディレクティブ

例えば以下の例では、ボタン要素に対してv-ifを使用しています。
（color="primary"はボタンの色を指定しています）

vue

<template>
    <v-btn v-if="true" color="primary">ボタンだよ</v-btn>
</template>

v-if="true"なので、こんなボタンが表示されます。

これをv-if="false"にすると、ボタンが消えます。
他にも、v-if="変数 === 値 "やv-if="変数 !== '文字列' "などのように記述することもでき、ディレクティブの式が真を返す場合のみ表示されます。

v-if を複数要素に適用したい

表やグラフなど、複数の要素を1つのまとまりとしてv-ifで制御したい場面はよくあると思います。
例えばこんな感じの長ったらしいコードについて、v-card-textの内容を、セレクトタグで選択した値など何らかの条件によって表示が変わるようにしたいとします。（内容は適当ですが例なのでご勘弁を）

vue

<template>
    <v-card>
        <v-card-text>
            <v-card-subtitle>タイトル</v-card-subtitle>
            <v-card>
                <v-row>
                    <v-col>あれとか</v-col>
                    <v-col>これとか</v-col>
                </v-row>
            </v-card>
        </v-card-text>
    </v-card>
</template>

さてここで、v-ifの何たるかを全然わかっていない僕はこんなことをします。

間違った書き方

<template>
    <v-card>
        <v-card-text v-if="true">  <!-- ← ここにv-if置いて見事にエラー -->
            <v-card-subtitle>タイトル</v-card-subtitle>
            <v-card>
                <v-row>
                    <v-col>あれとか</v-col>
                    <v-col>これとか</v-col>
                </v-row>
            </v-card>
        </v-card-text>
    </v-card>
</template>

初心者の直観的にはまさにやりたいことはこんなイメージなんですが…これではエラー。
v-ifは基本的には単一の要素に対して有効だからです。

正しくは以下のように、条件で表示を変えたい要素を新たにtemplateタグで囲み、このtemplateタグにv-ifを付加すると思い通りの描画ができます。

正しい書き方

<template>
    <v-card>
        <v-card-text>   <!-- ← ここにv-ifを置くのではなく -->
            <template v-if="true">   <!-- ← ここにtemplateタグを作ってv-ifを置く -->
                <v-card-subtitle>タイトル</v-card-subtitle>
                <v-card>
                    <v-row>
                        <v-col>あれとか</v-col>
                        <v-col>これとか</v-col>
                    </v-row>
                </v-card>
            </template>
        </v-card-text>
    </v-card>
</template>

これでv-card-textの中身をv-ifで一括して制御できるようになりました。

まとめ

v-ifで一括して制御したい複数要素は、新たに作ったtemplateタグにv-ifを付加して、この中に入れる。

公式ドキュメントの説明はこちら。 ⇒ < template >での v-if による条件グループ