Event Based Prop Update Vue JS with LISTS

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>
<div id="app" v-cloak>
  <div v-for="(value, index) in values">
    <custom-component :val_sync="value" v-on:val-changed="values.splice(index, 1, arguments[0])">
    </custom-component>
  </div>
</div>

<template id="custom-component">
  <div>
    {{ val_sync }}
    <button v-on:click="change">CHANGE!</button>
  </div>
</template>

JavaScript

Vue.component('custom-component', {
  template: '#custom-component',
  props: ['val_sync'],
  data: function() {
  	return {
    	times: 0
    }
  },
  methods: {
  	change: function() {
    	this.times++;
    	this.$emit('val-changed', 'Times changed ' + this.times);
    }
  },
});

var app = new Vue({
    el: '#app',
    data: {
        values: [
        	'Original Value',
          'Original Value',
          'Original Value',
          'Original Value',
          'Original Value',
        ]
    }
})