Vue.js v-forで配列・オブジェクト要素を走査する

v-forで配列要素の走査

配列要素を走査して出力する。

liの部分がmonthList数分、繰り返される。

<div id="app1" class="frame">
<ul>
  <li v-for="month in monthList">{{month}}月</li>
</ul>
</div>

var app1 = new Vue({
  el: '#app1',
  data: {
    monthList: [1,2,3,4,5,6,7,8,9,10,11,12]
  }
});

foreach {k,v}ライクな使い方

(value, key)の順番なので注意する。

<ul>
  <li v-for="(month, index) in monthList">{{index}}番目:{{month}}月</li>
</ul>

v-forでオブジェクト要素の走査

オブジェクトも同様

<ul>
  <li v-for="(value, key) in user">{{key}}の値は{{value}}です</li>
</ul>

var app1 = new Vue({
  el: '#app1',
  data: {
    user: { name:"hoge", level:12, created_at:"2019-07-25" }
  }
});

v-forで配列の中のオブジェクトにアクセスする

こういった配列だと、

var app1 = new Vue({
  el: '#app1',
  data: {
    users: [
      { name:"hoge", level:12, created_at:"2019-07-25" },
      { name:"foo",  level:28, created_at:"2018-05-21" }
    ]
  }
});

こういうふうにアクセスできる。

<ul v-for="(user, index) in users">
  <li>{{index}}:番目 {{user.name}} </li>
  <li>{{index}}:番目 {{user.level}} </li>
  <li>{{index}}:番目 {{user.created_at}} </li>
</ul>

配列要素の変更をキャッチする

array[0] = "modify"

のように配列に直接アクセスしてもbindされているarray自体のオブジェクトハッシュ値は変更されない為、リアクティブとはならない。

Vueオブジェクトで用意されているsetメソッドを使用して配列を操作することでリアクティブとなる。

<button v-on:click="modify">1月を英語に変更</button>
<ul>
<li v-for="month in monthList">{{month}}月</li>
</ul>

var app1 = new Vue({
  el: '#app1',
  data: {
    monthList: [1,2,3,4,5,6,7,8,9,10,11,12]
  },
  methods: {
    modify: function(){
      Vue.set( this.monthList, 0, "January");
    }
  }
});

f-forとv-ifを組み合わせ、要素をフィルターする

userのlevelが20以上のオブジェクトを出力する例。

<ul v-for="(user, index) in users" v-if="user.level >= 20">
  <li>{{index}}:番目 {{user.name}} </li>
  <li>{{index}}:番目 {{user.level}} </li>
  <li>{{index}}:番目 {{user.created_at}} </li>
</ul>

f-forとcomputedプロパティを組み合わせる

computedプロパティが返す値が配列やオブジェクトの場合、v-forと組み合わせることが出来る。

以下の例ではcomputedプロパティ:under20LevelOrderAscは予めusers.level < 20でfilterし、level昇順でソートした配列を返す。

var app1 = new Vue({
  el: '#app1',
  data: {
    users: [
      { name:"hoge", level:12, created_at:"2019-07-25" },
      { name:"foo",  level:28, created_at:"2018-05-21" },
      { name:"bar",  level:8, created_at:"2019-07-26" }

    ]
  },
  computed:{
    under20LevelOrderAsc: function(){
      var users = this.users.filter( function(user){
        return user.level < 20;
      });
      return users.sort( function(a, b){
        return a.level - b.level;
      });
    }
  }
});

<ul v-for="(user, index) in under20LevelOrderAsc">
  <li>{{index}}:番目 {{user.name}} </li>
</ul>

サンプルコード

Vue-Samples/for.html at master · letitride/Vue-Samples · GitHub

リンク