Fork me (vue@v1.0.24)

by Denis Karabaza

HTML

<script src="https://cdn.rawgit.com/vuejs/vue/v1.0.24/dist/vue.js"></script>
<div id="demo">
  <child :a.sync="a" :b.sync="b" :sum="sum"></child>
</div>

<hr/>
<ul>
  <li>vue <a href="https://cdn.rawgit.com/vuejs/vue/v1.0.24/dist/vue.js">v1.0.24</a></li>
  <li><a target="_blank" href="https://jsfiddle.net/simplesmiler/xto1h4k4/">vue-router fiddle</a></li>
</ul>

JavaScript

var child = {
	template: `
  	<div>
    	<p>A: <input v-model="a" number></input></p>
      <p>B: <input v-model="b" number></input></p>
      <p>A+B: {{ sum }}</p>
      <p><button @click="increment">Increment A and show old sum and new sum</button></p>
    </div>
  `,
  props: {
  	a: { type: Number, twoWay: true },
  	b: { type: Number, twoWay: true },
  	sum: { type: Number },
  },
  methods: {
  	increment: function() {
    	var oldSum = this.sum;
      this.a += 1;
      var newSum = this.sum;
      this.$nextTick(function() {
      	var realNewSum = this.sum;
      	alert('old: ' + oldSum + ', new: ' + newSum + ', real new: ' + realNewSum);
      });
    },
  },
};

new Vue({
  el: '#demo',
  components: { child: child },
  data: function() {
  	return {
    	a: 5,
      b: 7,
    };
  },
  computed: {
  	sum: function() {
    	return this.a + this.b;
    },
  },
});