Vue.jsに関する質問です。

Question

Vue.jsに関する質問です。
現在、Vue.jsのドキュメントをみながら、
下記のようなdataの中に複数のオブジェクトがある場合に、
v-forで表示させるものを作成しております。

<div id="view">
	<div v-for="hoge in hoges">
		<p>{{ hoge.id }}</p>
		<p>{{ hoge.count }}</p>
	</div>
</div>

var view_model = new Vue({
	el: '#view',
	data: {
		hoges: [
			{
				id: 'id_01',
				count: 5
			},
			{
				id: 'id_02',
				count: 9
			}
		]
	}
});

上記のhogesに、Ajax等で取得したデータを追加、
及び、既にidが存在する場合は更新処理を行いたいと考えております。

現状として、
データの追加処理はpushで可能かなと思うのですが、
既にあるデータの更新方法がわからない状態です。

//重複したIDをが無ければ追加
view_model.hoges.push({
	id: 'id_03',
	count: 0
});

//IDが既に存在すれば、countを+1したい。
/*
	どのような処理が必要か。
*/

どのように記述すれば、実現可能かご教授いただけますと幸いです。
何卒、よろしくお願いいたします。

Answer 1

Ajaxで受信するデータの構造が不明ですが、1つずつdataの中身を見ていくしかないのかなと思います。

var new_data = ['id_01', 'id_02', 'id_03', 'id_01'];

new_data.forEach(function(id) {
  for (var i = 0; i < view_model.hoges.length; i++) {
    if (view_model.hoges[i].id === id) {
      view_model.hoges[i].count++;
      return;
    }
  }

  view_model.hoges.push({
    id: id,
    count: 1
  });
});

動作サンプル

Comments

[stack-overflow]

回答ありがとうございます。
動作サンプルまでご用意いただき、大変わかりやすかったです。