Vue

by crucify

HTML

<div id="app">
  <h2>{{ message }}</h2>
  <h2>{{ selected }}</h2>
  <h2>{{ checked }}</h2>
  <h2>{{ picked }}</h2>
  <input type="text" v-model="message">
  <select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <input type="checkbox" name="check" value="1" v-model="checked">
  <input type="checkbox" name="check" value="2" v-model="checked">
  <input type="checkbox" name="check" value="3" v-model="checked">
  <input type="radio" name="radio" value="1" v-model="picked">
  <input type="radio" name="radio" value="2" v-model="picked">
  <input type="radio" name="radio" value="3" v-model="picked">
</div>


<button id="btnInput">input변경</button>
<button id="btnSelect">select변경</button>
<button id="btnCheckbox">checkbox변경</button>
<button id="btnRadio">radio변경</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
	  message: '',
    selected: 'B',
    checked: ['2'],
    picked: '2'
  },
  watch: {
  	text (newVal) {
	    console.log('newVal => ', newVal)	
    }
  }
})

/* function getVueObj(obj) {
  while(!('__vue__' in obj)) {
    obj = obj.parentNode;
  }
  return obj;
} */

document.getElementById('btnInput').addEventListener('click', function () {
	var inp = document.querySelector('input[type="text"]');
  inp.value = Math.random(1000, 10000);
  inp.dispatchEvent(new Event('input'));
})
document.getElementById('btnSelect').addEventListener('click', function () {
	var inp = document.querySelector('select');
  inp.value = 'C';
  inp.dispatchEvent(new Event('change'));
})
document.getElementById('btnCheckbox').addEventListener('click', function () {
	var inp = document.querySelector('input[type="checkbox"]');
  inp.checked = true;
  inp.dispatchEvent(new Event('change'));
})
document.getElementById('btnRadio').addEventListener('click', function () {
	var inp = document.querySelector('input[type="radio"]');
  inp.checked = true;
  inp.dispatchEvent(new Event('change'));
})