(4)Vue によるリアクティブプログラミング その2
「(3)Vueによるリアクティブプログラミング その1」の続きです。v-for
やmethod
で実際のアプリケーションで使う処理を追加してみます。
例として、入力フィールドに入力された文字列を画面上にリスト表示するようなプログラムを作ってみます。
参考ドキュメント
"v-for"でループ
配列をループで回してリスト表示するには、v-for
というキーワードを使います。
Vueのドキュメント(リストレンダリング)を参考にして、プロジェクトは、「(3)VueによるReactiveプログラミング その1」で使った"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のキーを持った連想配列を3個、初期値として格納しています。それを、<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の機能を使って、変数のバインド、ループの処理、ボタンを押したときの処理の追加方法を見てみました。
Author And Source
この問題について((4)Vue によるリアクティブプログラミング その2), 我々は、より多くの情報をここで見つけました https://qiita.com/kztmy/items/f62b21e66145d7be0ac9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .