vue.js radio button 토글 이벤트 걸기

webpack 사용중!

라디오버튼을 이용해서 datepick이라는 클래스의 div를 show/hide 할 예정

템플릿 :

<template>
<div class="radio">
	<label>
		<input type="radio" class="minimal" value="now" name="sendType" id="sendType" v-model="toggleSendType"> 즉시
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" class="minimal" value="reserve" name="sendType" id="sendType" v-model="toggleSendType"> 예약
	</label>
	<div class="input-group datepick" v-if="sendType">
		<div class="input-group-addon">
			<i class="fa fa-calendar"></i>
		</div>
		<input type="text" class="form-control pull-right" id="reserveDate">
	</div>
</div>
</template>

스크립트 :

<script>
	export default {
		name: 'user-usersearch',
		data: function(){
			return {
				sendType: false,
				toggleSendType: 'now'
			}
		},
		watch: {
			toggleSendType: function(data){
				if(data == "now")
					this.sendType = false
				else
					this.sendType = true
			}
		}
	}

</script>

코드를 간단하게 설명하자면

v-model을 이용하여 toggleSendType을 연결시켜준다.

요 변수 안에 들어가는 내용은 radio버튼의 value값으로

이 값이 일치하면 체크되고, 불일치하면 체크가 풀리게 되는 거 같음

-> toggleSendType의 디폴트값이 now. 따라서  now의 value를 가진 라디오버튼이 체크될것임. 그리고 만약 reserve value를 가진 라디오버튼이 체크되면 toggleSendType의 값이 reserve가 되겠다.

그리고, watch를 이용하여 감시자를 만든다. toggleSendType변수의 값이 바뀌는지 안바뀌는지 감시하겠다는 말인듯.

그래서 data에 now/reserve라는 radio의 value값이 들어올것이며, 이를 토대로 이벤트를 걸어주면 된다.