JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]"></script>
<!-- 외부에서 Vue 인스턴스의 데이터를 변경하기 위해 사용 -->
<button id="outside-button">Outside</button>

<div id="app">
  <button v-on:click="modifyDataOne">One</button>
  <button v-on:click="modifyDataTwo">Two</button>
  <pre>
    {{object}}    
  </pre>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: function () {
		return {
      	object: {}
    }
	},
  methods: {
  	modifyDataOne: function () {
			// 주의: 아직 this.object.greeting 이 없는 경우 조작 불가능
    	this.object['greeting'] = 'Hello One !' + new Date();
		},
  	modifyDataTwo: function () {
    	this.$set(this.object, 'greeting', 'Hello Two !' + new Date());
		}
  }
});

var button = document.querySelector('#outside-button');
button.addEventListener('click', function () {
  Vue.set(app.$data.object, 'greeting', 'hello' + new Date());
});