Vue - Component bound external data

same count used everywhere

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  Outer: {{ mydata.count }}<br/>
  <edit-ctrl :refobj="mydata" prop="count"></edit-ctrl>
</div>

CSS

.interface {}

JavaScript

var commonData = {
  count: 0
};

Vue.component('edit-ctrl', {
  props: ["refobj", "prop"],
  template: '<button v-on:click="refobj[prop]++">You clicked me {{ refobj[prop] }} times.</button>'
})

var vm1 = new Vue({
  el: '#div1',
  data: {
    mydata: commonData // note how count has to contianed within an object 'mydata' which can be passed to the component. 'count' is passed to the component as a property name by value.
  }
});

var v = 1000;
setInterval(function(){Vue.set(commonData, "count", commonData.count+1000)}, 5000);