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

2021年2月4日 20:04

前回アップしてからだいぶ日が空いてしまいました。復習をしつつ、引き続きVue.jsを使ったTodoアプリを作っていきたいと思います。

前回の復習

前回は、配列とv-forを使って複数のTodoリストを追加しました。

▼ main.js

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

▼ 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="todos[0].text" class="form-control">
</p>

v-forディレクティブはjQueryでいうfor文のような使い方ができます。

　　v-for="変数 in 配列"　// 変数と配列を当てはめる

この形で、todosの配列が終わるまで<li>を追加しました。
また、v-forで取れた変数todoの値をバインディングするので、それぞれ下記のようにdata要素と紐付けています。

　checkboxのv-model:のdone要素： todo.done
　spanのv-bind:のclass要素： {'done': todo.done}
　spanの中のtext要素：{{todo.text}}
　inputのtext入力要素：v-model="todos[0].text"　※

　※ 暫定的に、0番目（リストの一番初め）の要素に仮で紐づけてます。

次に追加ボタンを押したら、入力フィールドのテキストがTodoリストに追加されるようにします。

追加ボタンを用意する

Todoリストを追加するためのボタンと、入力フィールドの値をバインディングする変数を新たに作成します。

<p>
   <input type="text" v-model="todoText" class="form-control">
</p>
<button class="btn btn-primary btn-sm">追加</button>

button要素にはBootstrapのbtnクラスを付与してスタイルを整えます。ブラウザで開くと下記のようになっています。

また、input要素のバインディング先（v-modelの値）はtodoTextという新しい変数にします。なので、main.jsの方にもtodoTextという変数を追加しておきましょう。
todoTextは最初何も入っていないので、初期値は空です。

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

追加ボタン押下でTodoリストを追加する

次はボタンをクリックした時の設定を行います。ボタンクリックのイベントは、v-onディレクティブを使います。

<p>
   <input type="text" v-model="todoText" class="form-control">
</p>
<button v-on:click="addTodo()" class="btn btn-primary btn-sm">追加</button>

button要素にv-onを入れます。v-onは下記のような構文で書きます。

　　v-on:イベント名="処理または関数名"

v-onのイベントが起きたら、指定の処理または関数を実行します。
今回はボタンをクリックしたら、別途用意するaddTodoという関数を実行したいので、イベント名にはclick、関数名には”addTodo()”と記述します。

　　v-on:click="addTodo()"

続いて、addTodo関数を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}
           );
       }
   }
});

関数を追加するにはmethodsというプロパティを使います。methodsは下記のように書きます。

　　methods: {
　　　関数名: function() {
　　　　実行する処理;
　　　}
　　}

今回は関数名にaddTodoが入ります。
実行する処理には、入力フィールドのテキストをTodoリストに追加する処理を書きます。１行ずつ見ていきましょう。

var newTodo = this.todoText;

入力フィールドのテキストは、先ほどtodoTextという変数にバインディングしました。なので、その値を取り出し、一旦newTodoという変数に入れておきます。

todoTextを取り出す際に、todoTextがどこに存在するのか指定する必要があります。ここではthisと指定します。（thisの説明はここでは省略しますが、作成したVueアプリケーションを指していると思ってください。）

this.todos.push(
   {text: newTodo, done: false}
);

次にTodoリストに加える処理です。Todoリストはtodosという配列でした。配列にデータを加える時は、pushというVue.jsのメソッドを使います。

　　配列名.push(加えるデータ);

ここでも、todosの場所を指定する必要があるため、this.todosと書きます。加えるデータは下記のようになります。

　　text： newTodo（todoTextの値を入れた変数）
　　done： false（初期状態はチェックオフ）

これでTodoリストにデータを追加することができるようになりました。

次回は、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コミュニティにご招待させていただきます。

この記事が気に入ったらサポートをしてみませんか？