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

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

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

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

今回のサンプルコードはこちらです!

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リストに近づいてきましたね！！
サンプルコードもあるので実装してみてください！

次回くらいからドットインストール的にはローカルストレージに入れるはず…（笑）