Vue 2.0 Hello World

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Single id array: {{ ids }}
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(data, idx) in detailData">
        <td>{{ data.id }}</td>
        <td>{{ data.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    
    listData: [
    	{
      	ids: [1,2],
      	name: 'alpha'
      },
      {
      	ids: [1,2],
      	name: 'bravo'
      },
      {
      	ids: [1,2,3],
      	name: 'gamma'
      },
      {
      	ids: [3,4],
      	name: 'delta'
      }
    ],
    
    detailData: [],
    ids: []
  },
  created() {    
    this.listData.forEach(data => {
    	data.ids.forEach(id => {
      	if(!this.ids.includes(id)) this.ids.push(id);
      })
    })
    
    this.ids.forEach(id => {
    	this.listData.forEach(data => {
      	if(data.ids.includes(id)) {
        	var obj = data;
          obj.id = id;
          this.detailData.push(obj);
        }
      })
    })
  }
})