「（３）Vueによるリアクティブプログラミング その１」の続きです。v-forやmethodで実際のアプリケーションで使う処理を追加してみます。
例として、入力フィールドに入力された文字列を画面上にリスト表示するようなプログラムを作ってみます。
参考ドキュメント
"v-for"でループ
配列をループで回してリスト表示するには、v-forというキーワードを使います。
Vueのドキュメント（リストレンダリング）を参考にして、プロジェクトは、「（３）VueによるReactiveプログラミング その１」で使った"react01"を変更します。
最初に、配列に固定の文字列を入れて、その配列をv-forを使って表示してみます。
"HelloWorld.vue"のファイルを以下のように変更します。
<v-list>...</v-list>の部分と、<script>...</script>の、dataを変更しています。
<template>
<v-container>
<v-list>
<v-list-item v-for="item in messageList" :key="item.message" link>
<v-list-item-title>{{ item.message }}</v-list-item-title>
</v-list-item>
</v-list>
<v-text-field
label="Input your message here."
prepend-icon="mdi-message-text-outline"
v-model="inputMessage" />
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: function () {
return {
messageList: [
{message: 'message 1'},
{message: 'message 2'},
{message: 'message 3'}
],
}
}
};
</script>
Visual Studio Codeの画面で見るとこんな感じです。
Visual Studio CodeのTerminal で、> npm run serveを実行して、ローカルにサーバを起動したら、デバッグのアイコンをクリックして、Launch Chrome...の緑色の三角アイコンをクリックします。そうすると、以下のような画面が表示されるはずです。
ここでは、まず、todoListという配列に、messageのキーを持った連想配列を３個、初期値として格納しています。それを、<v-list-item>のv-for="item in todoList"でitemという変数に順番に読み出して、{{item.message}}で画面に表示しています。
ここで、:keyは必ずしも必要ではないですが、Vueのプログラムでは付加することを推奨されています。通常はDB上のキー項目（例えばドキュメントIDのようなユニークなキー）を使うと思いますが、ここでは簡略に、messageそのものをキーとして指定しています。
:key はv-bind:key のVueで用意されている省略記法です。詳しくは、Vueのマニュアル、v-bindの省略記法を参照してください。
ボタンを押したときの処理を追加
次に、入力フィールドに文字列を入れて、ボタンを押すと今のmessageが追加されるようにしてみます。
ボタンを押したときの処理を行う関数を、methods:という名前で、登録します。
先ほどと同様、HelloWorld.vueを以下のように修正します。
<template>
<v-container>
<v-list>
<v-list-item v-for="item in messageList" :key="item.message" link>
<v-list-item-title>{{ item.message }}</v-list-item-title>
</v-list-item>
</v-list>
<v-text-field
label="Input your message here."
prepend-icon="mdi-message-text-outline"
v-model="inputMessage" />
<v-btn v-on:click="addMessage">Add</v-btn>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: function () {
return {
messageList: [],
inputMessage: ''
}
},
methods: {
addMessage: function() {
this.messageList.push({message: this.inputMessage});
}
}
};
</script>
これでデバッガからブラウザを起動すると以下のように表示され、入力フィールドに文字列を入れて、Addボタンを押すと、上部に入力したメッセージが表示されます。
ここでの動作は以下のようになっています。
- 入力フィールドに入力された文字列は、
v-modelによって、変数inputMessageに格納（双方向バインド）されます。 -
<v-btn>がクリックされると、v-on:clickで指定された関数addMessageが呼び出されます。 -
messageListに入力テキストを、messageのキーが付いた連想配列{message: this.inputMessage}を追加します。ここで、dataで宣言した変数を参照するには、thisをつける必要があることに注意してください。 - あとは、最初に確認した通り、
<v-list-item>を、v-forで繰り返してmessageListから要素を順番に取り出して、表示しています。
ここで、3.の配列の関数pushが、Vueが変化したことを検知できる関数なので、messageListが変化したことがVueに伝わり、表示も自動的に変更されることになります。Vueが配列の変化を検知できる関数はドキュメント「配列の変化を検出」にあるものに限られています。
まとめ
この記事では、Vueの機能を使って、変数のバインド、ループの処理、ボタンを押したときの処理の追加方法を見てみました。