vue

by fergal_doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<button @click="update1">Extend</button>
<button @click="update2">Push directly to array</button>
<div v-for="item in foo.items" track-by="name">
  <comp>

  </comp>
</div>

JavaScript

new Vue({
  el: 'body',
  data: {
    foo: {
      items: [
        { name: 'aaa'},
        { name: 'bbb'},
        { name: 'ccc'},
        { name: 'ddd'},
      ]
    }
  },
  methods: {
    update1: function() {
      $.extend(this.foo, {
        items: [
          { name: 'aaa'},
          { name: 'bbb'},
          { name: 'ddd'}
        ]
      });
    },
    update2: function() {
      this.foo.items.push('another' + Math.random());
    }
  },
  ready: function() {
    this.$watch('foo.items', function(value) {
      console.log('items changed', value)
    });
  },
  components: {
    comp: {
      template: '<div>Yo</div>',
      ready: function() {
        console.log('comp ready');
      }
    }
  }
});