<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello :list="list"></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  data () {
    return {
      list: [{
        name: 'test-example1',
        id: 1
      },
      {
        name: 'test-example2',
        id: 2
      },
      {
        name: 'test-example3',
        id: 3
      }]
    }
  },
  components: {
    Hello
  }
}
</script>

<template>
<div class="hello">
  <h1>{{ msg }}</h1>
  <li v-for="item in list" track-by="$index">{{item.name}}</li>
  <button @click="clickHandle">push item</button>
</div>
</template>

<script>
var mockData = {
  name: 'test',
  id: 'test',
  test: false
}

export default {
  props: ['list'],
  data () {
    return {
      msg: 'Hello World!'
    }
  },
  created () {
    // mock code
    this.list = this.list.map(item => {
      return {
        name: item.name,
        id: item.id,
        test: false
      }
    })
  },
  methods: {
    clickHandle () {
      this.list.push(mockData)
    }
  }
}
</script>