Vue.jsを使ってwebアプリを作ろう#07

前回は、Todoリストに入力フィールドのテキストを追加する処理を行いました。今回は、Todoリストに追加する前に入力内容をチェックしたり、追加後の入力フィールドを空に戻す処理を行っていきます。

前回までのコードは以下の通りです。

▼ index.html

<ul class="list-unstyled">
   <li v-for="todo in todos" class="form-check">
       <label>
           <input type="checkbox"　v-model="todo.done" class="form-check-input">
           <span v-bind:class="{'done': todo.done}">{{todo.text}}</span>
       </label>
   </li>
</ul>
<p>
   <input type="text" v-model="todoText" class="form-control">
</p>
<button v-on:click="addTodo()" class="btn btn-primary btn-sm">追加</button>

▼ main.js

var app = new Vue({
   el: '#app',
   data: {
       todoText: '',
       todos: [
           {text: 'Vue.jsのバインディングを学習する', done: true},
           {text: 'Vue.jsでtodoリストをつくる', done: false}
       ]
   },
   methods: {
       addTodo: function() {
           var newTodo = this.todoText;
           this.todos.push(
               {text: newTodo, done: false}
           );
       }
   }
});

Todoリスト追加前に入力内容をチェックする

現在のTodoリストは、何もチェックしていないため、入力フィールドが空でも追加できてしまします。

なので、追加する前に入力値が空でないか判定しましょう。
入力値はnewTodoという変数に入っているので、それをif文で判定します。if文の書き方は普通のjavascriptと同じです。

　　if (条件) {
　　　条件が成り立った場合の処理
　　}

この場合の条件は「newTodoが空でないこと」なので、!newTodoとなります。条件式が成り立った場合の処理は「何もせずに終わる」なので、return;でメソッドを終わらせましょう。

if (!newTodo) {return;}

チェックはpushする直前に行います。

    methods: {
       addTodo: function() {
           var newTodo = this.todoText;
           if (!newTodo) {return;}
           this.todos.push(
               {text: newTodo, done: false}
           );
       }
   }

これで入力値が空の場合、追加ボタンを押してもTodoリストには追加されなくなりました。
しかし、これだけですとスペースで空白を入れている場合はチェックをすり抜け、Todoリストに追加されてしまいます。

そこで、空白を削除するtrimメソッドを追加します。trimは入力値の前後の空白を削除するメソッドです。空白は全角・半角どちらも削除します。trimは、関数の中で書いても良いですし、index.htmlのv-modelの後に付けても大丈夫です。

▼関数の中でtrimを書く場合

var newTodo = this.todoText.trim();

▼index.htmlのv-modelにtrimを書く場合

<input type="text" v-model.trim="todoText" class="form-control">

今回は関数の中にtrimを書いておきます。これで、入力値に空白が入っている場合は削除されるようになりました。

Todoリスト追加後に入力フィールドを空にする

次に、リストを追加した後、入力フィールドを初期化します。入力フィールドは this.todoText でしたね。なので、この値を空にします。

this.todoText = '';

入力フィールドの初期化はpushした後に行います。

methods: {
   addTodo: function() {
       var newTodo = this.todoText.trim();
       if (!newTodo) {return;}
       this.todos.push(
           {text: newTodo, done: false}
       );
       this.todoText = '';
   }
}

これで追加した後の入力フィールドが空っぽになるようになりました。

次回からは、Todoリストの件数を集計したり、集計結果を表示してみたいと思います。

*********

今回はここまで。

ちょっと気になった、更に知りたくなったという方は、

ぜひ、気軽に相談できるMentaをしております。

Mentaでメンターサポート
https://menta.work/user/22914

ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346

また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンの入会
サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。
月額500円となります。

入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。

参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、Slackコミュニティにご招待させていただきます。

https://note.com/hamasan918/m/me6f7be9ad4d8