<!--
  * track-by="primary": diff array by this as the primary key, default is the index
  * use `Vue.set(list, index, value)` to set a item value, do not use `list[index] = value`
  * use `list.splice()`, `list.push()`, `list.pop()`, `list.shift()`, `list.unshift()`, `list.sort()`, `list.reverse()`, do not use `list.length = x`
-->

<template>
  <div>
    <text class="title">Track by</text>
    <text class="subtitle" v-for="(item, k, $index) in list" track-by="item.key">{{$index}}-{{item.text}}</text>
    <text class="btn" @click="update">Update</text>
    <text class="btn" @click="mutate">Mutate</text>
  </div>
</template>

<style scoped>
  .title {font-size: 48px;}
  .subtitle {font-size: 36px;}
  .btn {font-size: 36px; text-align: center; color: white; background-color: gray; padding: 20px; border-radius: 5px;}
</style>

<script>
  module.exports = {
    data: function () {
      return {
        list: [
          {key: 1, text: 'a'},
          {key: 2, text: 'a'},
          {key: 3, text: 'b'},
          {key: 4, text: 'c'},
          {key: 5, text: 'a'}
        ],
        flag: true
      }
    },
    methods: {
      update: function (e) {
        // equals to `this.list.text = 'foo'`
        // DO NOT USE: `this.list[2] = {key: 3, text: 'foo'}}`
        Vue.set(this.list, 2, {key: 3, text: 'foo'})
        console.log('this.list', this.list)
      },
      mutate: function (e) {
        if (this.list.length % 2) {
          this.list.push({key: 'x', text: 'bar'})
        }
        else {
          this.list.pop()
        }
        console.log('this.list', this.list)
      }
    }
  }
</script>