Edited at

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

More than 3 years have passed since last update.


例 オブジェクト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>