json diff patch with vuejs

json diff patch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsondiffpatch/0.1.38/jsondiffpatch-full.min.js"></script>
<div id="app">
<pre> {{j | json}}</pre>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    j: {}
  },
  created: function () {
  	var j = this.j;
		j.country1 = {
      name: "Argentina",
      stats: {
        	size: "large",
          gdp: "1bn"},
      capital: "Buenos Aires",
      unasur: true
    };
    j.reconstruct1 = {};
    
    // clone country
    j.country2 = JSON.parse(JSON.stringify(j.country1));
		j.reconstruct2 = {};
    
    // make some changes
    j.country2.name = "Republica Argentina";
    j.country2.stats.population = 41324992;
    delete j.country2.capital;

    j.reverseDelta = jsondiffpatch.diff(j.country2, j.country1);
    
    // reconstruct1
    j.reconstruct1 = JSON.parse(JSON.stringify(j.country2));
    j.reconstruct1 = jsondiffpatch.patch(j.reconstruct1, j.reverseDelta);

    j.delta = jsondiffpatch.diff(j.country1, j.country2);
    
    // reconstruct2
    j.reconstruct2 = JSON.parse(JSON.stringify(j.country1));
    j.reconstruct2 = jsondiffpatch.patch(j.reconstruct2, j.delta);

  }
})