【Vue.js入門】v-ifを活用して空配列時にToDoアプリに「Todoはありません」と表示しよう!

公開日:2018-11-04
最終更新:2018-11-04

空配列時にToDoアプリに「Todoはありません」表示する

前回までは【Vue.js入門】v-bindでclassを操作してToDoアプリの完了状態を管理してみるにて構築していました!

今回のサンプルコードはこちらです!a ToDoアプリ上にToDoが存在しない(空配列時)にはTodoはありません」と表示できるようになります。

v-ifディレクティブとは?

何かしらの言語に触れたことのある方なら直感的に使用できると思います。

<li v-if="todos.length">
  処理A
</li>
<li else>
  処理B
</li>

上記のコードなら、todos(todo配列)にtodoがあれば処理A、todoがなければ処理Bが実行されるようになります。

早速、v-ifを使ってみよう!

上で説明した通り、実装してみましょう。

    <h1>My Todo Lists</h1>
    <ul v-if="todos.length">
            //todoが存在したらの処理A↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      <li v-for="(todo, index) in todos">
        <input type="checkbox" v-model="todo.isDone">
        <span :class ="{done: todo.isDone}"> 
          {{ todo.title }}
        </span>
        <span @click="deleteItem(index)" class="command">[]</span>
      </li>
             //todoが存在したらの処理B↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
    </ul>
    <ul v-else> 
            //todoが存在しなかったらの処理↓↓↓↓↓↓↓↓
      <li>ToDoはありません</li>
            //todoが存在しなかったらの処理↑↑↑↑↑↑↑↑
    </ul>

  • タグ内では、todos(todo配列)にtodoがあれば、前回までに実装した処理Aが実行され、以下のようにUIに反映されます。

    li v-elseでは、!todos.lengthすなわちtodoがなければ処理Bが実行されるようになります。 todosが空配列の場合に実行されるので「ToDoはありません」と表示させます。

    これで一通り実装できたのできました!

    よりToDoリストに近づいてきましたね!! サンプルコードもあるので実装してみてください! 次回くらいからドットインストール的にはローカルストレージに入れるはず…(笑)

  • 記事が少しでもいいなと思ったらクラップを送ってみよう!
    18
    +1
    @QA8SrqqPrVZPs6LSの技術ブログ

    よく一緒に読まれている記事

    0件のコメント

    ブログ開設 or ログイン してコメントを送ってみよう
    目次をみる

    技術ブログをはじめよう

    Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

    技術ブログを開設する

    Qrunchでアウトプットをはじめよう

    Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

    Markdownで書ける

    ログ機能でアウトプットを加速

    デザインのカスタマイズが可能

    技術ブログ開設

    ここから先はアカウント(ブログ)開設が必要です

    英数字4文字以上
    .qrunch.io
    英数字6文字以上
    ログインする