Vue.jsでオブジェクトから同じ要素を何度もリストに拾ってはpushする何か

例 オブジェクトSupermansの要素をentriesに任意で何度もpushする

• Supermans
  • キン肉マン（ダメ超人）
  • ロビンマスク（超人博士）

↓

• entries
  1. キン肉マン（ダメ超人）
  2. ロビンマスク（超人博士）
  3. キン肉マン（ダメ超人）

これを、Vue.jsを使って実現する場合…

javascript

var Vue = global.Vue = require('vue');
var Supermans = [
  {
    title: 'ダメ超人',
    player: 'キン肉マン'
  },
  {
    title: '超人博士',
    player: 'ロビンマスク'
  },
  {
    title: '善戦超人',
    player: 'ジェロニモ'
  },
  {
    title: 'テキサス・ブロンコ',
    player: 'テリーマン'
  },
  {
    title: '世話係',
    player: 'アレキサンドリア・ミート（ミートくん）'
  },
  {
    title: 'ファイティングコンピューター',
    player: 'ウォーズマン'
  },
  {
    title: '闘将',
    player: 'ラーメンマン'
  },
  {
    title: '完全無欠の完璧超人',
    player: 'ザ・サムライ（ネプチューンマン）'
  }
];
var peopleLength = Supermans.length;

var list = module.exports = new Vue({
  el: '#list',
  data: {
    entries: []
  },
  methods: {
    addEntry: function(){
      var r = Math.floor(Math.random()*peopleLength);
      var entry = Supermans[r];
      this.entries.push(entry);
    }
  }
});

jade

section#list
  h1 キン肉マンチーム
  button.add-entry(v-on="click:addEntry")
  ol.component__entries
    li.list_entry(v-repeat="entries")
      dl.entry_data
        dt.data_player-name(v-text="player")
        dd.data_player-title(v-text="title" v-if="title")

とする。しかし、このままではentriesのデータに重複したものをpushしているのでバインディングは行われない。

• entries
  1. キン肉マン（ダメ超人）
  2. ロビンマスク（超人博士）
  3. キン肉マン（ダメ超人）

このように、entriesには3番目にキン肉マンを再度pushできない。
この場合はpushする際に以下のようにupdated要素を付けてpushすると3番目にキン肉マンが追加できる。
※Dateオブジェクトではなくても一意のidのようなものでもよい。

javascript

this.entries.push({
  player: entry.player,
  title: entrye.title,
  updated: new Date().getTime()
});

↓

javascript

var Vue = global.Vue = require('vue');
var Supermans = [
  {
    title: 'ダメ超人',
    player: 'キン肉マン'
  },
  {
    title: '超人博士',
    player: 'ロビンマスク'
  },
  {
    title: '善戦超人',
    player: 'ジェロニモ'
  },
  {
    title: 'テキサス・ブロンコ',
    player: 'テリーマン'
  },
  {
    title: '世話係',
    player: 'アレキサンドリア・ミート（ミートくん）'
  },
  {
    title: 'ファイティングコンピューター',
    player: 'ウォーズマン'
  },
  {
    title: '闘将',
    player: 'ラーメンマン'
  },
  {
    title: '完全無欠の完璧超人',
    player: 'ザ・サムライ（ネプチューンマン）'
  }
];
var peopleLength = Supermans.length;

var list = module.exports = new Vue({
  el: '#list',
  data: {
    entries: []
  },
  methods: {
    addEntry: function(){
      var r = Math.floor(Math.random()*peopleLength);
      var entry = Supermans[r];
      this.entries.push({
        player: entry.player,
        title: entrye.title,
        updated: new Date().getTime()
      });
    }
  }
});

itemを参照する場合

尚、Vue.jsのリファレンスにもありますが、ユニークなidなどを定義しておけば、リストのitemを再参照する際に便利です。

{
  items: [
    { _uid: 88f869d, ... },
    { _uid: 7496c10, ... }
  ]
}

html

<div v-repeat="items" track-by="_uid">
  <!-- content -->
</div>