オブジェクトの繰り返し描画 v-for – Vue.js入門

この記事では、Vue.jsで、オブジェクトの繰り返しを v-forディレクティブで行う方法について学習します。

実現したいこと。

オブジェクトから、値を取り出して、てリスト表示。

Taro
Yamada
28

オブジェクトのkeyとvalueを、リスト表示。

Taro : firstName
Yamada : lastName
28 : age

＜要素名 v-for=”バリュー in オブジェクト”＞
{{ 表示したいバリュー }}
＜/要素名＞

または、

＜要素名 v-for=”(バリュー, キー) in オブジェクト”＞
{{ 表示したいキー or バリュー }}
＜/要素名＞

構文は、このようになっていますが、実際にプログラムを書いて習得していきましょう。

空のテンプレートをマウントしてある、状態からはじめます。

まず、表示に使うユーザーオブジェクトを用意します。

オブジェクト何か、初心者向けにざっくり説明すると、
オブジェクトとは、様々な特性（言い換えると、プロパティ）をもったもの
です。

例えばの事例として、ユーザーオブジェクトを作成するJavaScriptのコードはこのような感じです。

<script>
  var user  = {
    firstName: 'Taro',
    lastName: 'Yamada',
    age: 28
  }
</script>

次に、dataオプションに、userという名前のobjectを用意します。
ファーストネーム、ラストネーム、年齢を定義します。

var app = new Vue({
  el: '#app',
  data: {
    user: {
      firstName: 'Taro',
      lastName: 'Yamada',
      age: 28
    }
  }
})

次に、template側でこのobjectを表示します。
まず、valueだけ表示してみます。

オブジェクトに格納されている値をリスト表示するために、v-for ディレクティブ使用しています。

<div id="app>
  <ol>
    <li v-for="user in users">{{ color }}</li>
  </ol>
</div>

このように、objecetのvalueが表示されました。

v-for ディレクティブは value in objectといった形式で、形式で繰り返しを実行できます。
繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。

このvalue には、user objectの、valueが繰り返しのたびに、1個づつ入ります。
繰り返しが進むごとに、valueに入る値が代わります。

このオブジェクトの名前は、dataオプションの、user プロパティで定義したものとそろえます。

次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。

つぎの様に記述してください。

<div id="app>
  <ol>
    <li v-for="(user, key) in users">{{ key }}:{{ color }}</li>
  </ol>
</div>

とします。

オブジェクトから、価を一つづつとりだして、　keyと、valueを1つずつ、表示していきます。
注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。

これで、keyとvalueを画面に表示することができました。

ちなみに、この変数名は、任意につけられるので、
つぎの様に記述してください。

<div id="app>
  <ol>
    <li v-for="(user, key) in users">{{ k }}:{{ v }}</li>
  </ol>
</div>

としても、同じ結果が得られます。

userの部分は、データプロパティで、指定した名前と揃えてください。

このレクチャーでは、オブジェクトの繰り返しの描画 v-forディレクティブ、について学習しました。

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！