Vue.js で表示したデータを更新する

フロント開発がもっと楽しくなる!Vue.js 学習メモ。Vue.js を使って表示したデータをイベントを使って更新します。

データ(変数)が更新されたら自動的に DOM も更新され、逆に DOM が更新されたらデータも更新されるというように今まで自分で書いていた処理を Vue がしてくれます。

単純なテキストを更新する

普通のテキストを更新してみましょう。v-on ディレクティブで各種のイベントに処理をバインドする事ができます。jQuery の on と一緒です。更新するためのメソッドを作りました。ボタンをクリックすると test1 のメソッドを実行しします。処理はメッセージの内容を「Hello Vue.js!」と変更しつつ押す度にカウントアップします。変更したい要素を探して…みたいな事はしていません。

<p>{{ message }} あなたは{{ count }}回クリックしたよ ★★</p>
<button v-on:click="test1">click!</button>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World!',
count: 0,
},
methods: {
test1: function(e) {
this.message = 'Hello Vue.js!';
this.count++;
},
},
});

ディレクティブの値には式が使えるので、使いまわす予定のない短いコードならメソッドを用意しないで直接書くことも出来ます。

<button v-on:click="message='Hello Vue.js!'; count++">test1</button>

リストのデータを更新する

配列を更新

リストの一部のインデックス 0 の「りんご」のデータを更新してみます。

<ul>
<li v-for="val in test2list">{{ val }}</li>
</ul>
<button v-on:click="test2">click!</button>
var vm = new Vue({
el: '#app',
data: {
test2list: ['りんご', 'ばなな', 'いちご'],
},
methods: {
test2: function() {
this.test2list[0] = 'おいしー!';
},
},
});

何も考えずにこう書いてみたけどこれは出来ないみたい。 参考

参考 URL を読むと、JavaScript の制限で配列は直接変更出来ないから set メソッドを使ってねーという事です。多分セッターが使用できるのは対象がオブジェクトの場合のみだからかもしれません。

inst.$set(object, key, value)

上のデータに置き換えるとこんな感じですね。メソッドの内容を書き直します。

this.$set(this.test3list, 0, 'おいしー!');

今度はちゃんと更新されました。

オブジェクトを更新

オブジェクトは特に滞りなく変更できました。

<ul>
<li v-for="(val, key) in test4list">(Key:{{ key }}) {{ val }}</li>
</ul>
<button v-on:click="test4">click!</button>
var vm = new Vue({
el: '#app',
data: {
test4list: {
'a': 'ハンバーグ',
'b': '焼肉',
'c': 'パスタ'
},
},
methods: {
test4: function() {
this.test4list.a = 'おいしー!';
},
},
});

オブジェクトのリストを更新

また配列なのですがとりあえず $set を使わずに試してみます。

<ul>
<li v-for="(val, no) in test5list" v-bind:key="val.name">
(No:{{ no }}) {{ val.name }} {{ val.price }}円 {{ val.sale }}
</li>
</ul>
<button v-on:click="test5(980, $event)">click!</button>

引数を持たせてインラインで実行する事もできます。この場合 $event で元のイベントオブジェクトを渡せます。

var vm = new Vue({
el: '#app',
data: {
test5list: [{
'name': 'とまと',
'price': '100'
}, {
'name': 'れたす',
'price': '200'
}, {
'name': 'きゅうり',
'price': '300'
}],
},
methods: {
test5: function(price, e) {
this.test5list[0].price = price;
this.test5list[0].sale = 'おすすめ';
},
},
});

出来ました。配列の値を直接弄るわけでなければ大丈夫みたいです。中のオブジェクトのセッターが働いているのでしょうか。手元でセッター付きオブジェクトのネストの実験をしてみたのですがセッター&ゲッターについてもちょっと勉強できました。

必要な場合以外は最後みたいにオブジェクトのリストにしてしまうのが楽かもしれませんね。

おわりに

データを結びつけて更新させるのは jQuery でごにょごにょ書くよりとても楽ですが、それでもデータを複雑に使用するようになるにつれてデータの整合性を保つのが大変になってくる…とよく聞きます。そこまで大きなアプリを作ったことがないので漠然としたイメージしか出来ませんが。そこで登場するのが vuex らしいのですけど勉強するのはまだまだ先になりそうかな!

とりあえず今回は v-on でのイベント登録の仕方とデータ更新の基本を覚えましたよ(•ө•)ノ 次回は条件を付けて何か操作したいと思います。たぶん。

Edited on 2017.02.18 Created on 2017.02.12 Vue.js JavaScript Webデザイン