JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]"></script>
<button id="data-changer">데이터 변경 요청</button>
<div id="app">
   <ul>
     <li v-for="data in responses">
       {{data.title}} - {{data.distance}}
     </li>
   </ul>
</div>

JavaScript

var app = new Vue ({
	el: '#app',
  data: function () {
  	return {
    	responses: [
	      { title: 'DATA1', data1: 1, data2: 2, distance: 3 },
	      { title: 'DATA2', data1: 4, data2: 5, distance: 9 },
      ]
    }
	},
  watch: {
  	responses: {
    	deep: true,
      handler: function (newVal, oldVal) {
				console.log('responses updated')
      }
		}
  }
})

var dataChanger = document.getElementById('data-changer')
dataChanger.onclick = function () {
  var responses = app.$data.responses;
	responses.forEach(function (response) {
  	response.data1 = response.data1 * 2
    response.data2 = response.data2 * 2
  	response.distance = response.data1 + response.data2
  })
}