Vue.jsを使ってwebアプリを作ろう#06
前回アップしてからだいぶ日が空いてしまいました。復習をしつつ、引き続き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リストに追加する処理を書きます。1行ずつ見ていきましょう。
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コミュニティにご招待させていただきます。
この記事が気に入ったらサポートをしてみませんか?