Vue+OnsenUIでの空リストの例外処理

Vue+OnsenUIで空のリストを表示する場合のみ、表示を変更したい際の方法です。

 

やりたいこと

v-forを用いてリストの中身を一覧で表示していくような場合に、「リストの中身が空」の場合だけ表示を変更したい、って思ったのでしらべてみました。

環境

  • Vue 2.3.0
  • OnsenUI 2.3.2
  • vue-onsenui 2.0.0_beta8
  • Chrome 58.0.3029.110 (64-bit)  (デバッグに用いました)

 

やり方

リストが「空」であることを判別して、その際にのみ表示する要素を追加すれば良さそうです。
この、リストが空であることの判別はリストの長さを取得して長さが0の場合にのみv-ifで要素を描画するように条件分岐すればOK。

 

サンプルコード

<!-- ヘッダーやhtmlタグなど -->
<body>

<template id="main">
    <v-ons-page>
        <v-ons-toolbar>
            <div class="center">予定表</div>
        </v-ons-toolbar>

        <v-ons-list>
            <template v-for="d in schedule_list">
                <v-ons-list-header>{{ d['day'] }}の予定</v-ons-list-header>
                <v-ons-list-item v-if="d['schedule'].length == 0">予定はありません</v-ons-list-item>
                <v-ons-list-item v-for="s in d['schedule']">
                    {{ s[0] }} | {{ s[1] }}
                </v-ons-list-item>
            </template>
        </v-ons-list>
    </v-ons-page>
</template>

<div id="app"></div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        template: '#main',
        data() {
            return {
                schedule_list: [
                    {
                        "day": "6/3(金)",
                        "schedule": [["09:00", "出社"], ["11:00", "会議"], ["15:00", "健康診断"]]
                    },
                    {
                        "day": "6/4(土)",
                        "schedule": []
                    },
                    {
                        "day": "6/5(日)",
                        "schedule": [["10:00", "映画館に行く"], ["12:00", "友達とランチ"], ["18:30", "サ○エさんをみる"]]
                    }
                ]
            }
        }
    });
</script>
</html>

13行目でリストの長さを調べて、長さが0の場合にのみ「予定はありません」と表示しています。
「リストが空の時は予定リストを表示しない」という処理は書かなくても表示されないのでいいかな〜って感じです。

 

また、少しわかりにくい気もしますが、

<v-ons-list-item v-if="d['schedule'].length == 0">予定はありません</v-ons-list-item>

の部分は

<v-ons-list-item v-if="!d['schedule'].length">予定はありません</v-ons-list-item>

でも動作します。(0は条件式でfalseと判定されるので、!で反転することにより0の際に≒trueと判定される。)

 

まとめ

リストの表示について、v-forとv-ifを使ってスッキリと書くことができました。
Vue便利ですね〜

余談ですが、説明をするためにこのプログラムにはあまりよろしくない部分があります。

※解決済み
(修正箇所はページ下部の更新履歴を参照してください。)

このコードのマズイところ。

本題には直接関係無いのですが、リストが3日分の予定それぞれに対して作成されています。わざわざons-listを3つ作らずとも[header:1][item:複数]の組み合わせを3つとも同じリストに描画すればいい話です。ですが、同じ階層?のheaderとitemに対してv-forを共有?する方法がわからなかったのでこうなってしまいました。　良い解決策を教えて頂けると助かります。

 

参考:

更新履歴

Naoki Matagawa 様のコメントを参考にさせていただき、11行目付近のプログラムを一部改変しました。
思い通りの動作を実装できました。ありがとうございます。

変更前

        <v-ons-list v-for="d in schedule_list">
            <v-ons-list-header>{{ d['day'] }}の予定</v-ons-list-header>
            <v-ons-list-item v-if="d['schedule'].length == 0">予定はありません</v-ons-list-item>
            <v-ons-list-item v-for="s in d['schedule']">
                {{ s[0] }} | {{ s[1] }}
            </v-ons-list-item>
        </v-ons-list>

変更後

        <v-ons-list>
            <template v-for="d in schedule_list">
                <v-ons-list-header>{{ d['day'] }}の予定</v-ons-list-header>
                <v-ons-list-item v-if="d['schedule'].length == 0">予定はありません</v-ons-list-item>
                <v-ons-list-item v-for="s in d['schedule']">
                    {{ s[0] }} | {{ s[1] }}
                </v-ons-list-item>
            </template>
        </v-ons-list>

 

 

By たくのこ | 2017年6月4日 | Android, JavaScript, OnsenUI, Vue, 技術系 | 3 Comments |

3 thoughts on “Vue+OnsenUIでの空リストの例外処理”

    1. たくのこ Post author

      コメントありがとうございます。とてもわかり易いご指摘で助かりました。
      また、ブログの記事を修正させて頂きました。

      今後ともよろしくお願いします。

      Reply ↓

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。