vue.js 강의 part1 마지막 강의에서 모달창 내에 input이 있는데 여기에 2를 기입했을 때 알림창 alert() 띄우기 할려하는데 왜 안될까요ㅠㅠ
watch때문인가 싶어서 주석 처리 하고 해보니 beforeUpdate나 updated 사용시 입력시 말고 닫기버튼 클릭시에 alert가 뜨네요
updated() {
console.log("업데이트 되었습니다.");
if (this.month == 2) {
alert("2개월은 너무 적음.. 안팝니다");
this.month = 3; // 값 변경을 통해 다시 updated()가 호출되는 것을 방지합니다.
}
}
하니까 모달창 클릭시에만 console에 로그 찍히고 input에 값 변경해도 안바뀌네
<template>
<Transition name="modal">
<div class="black-bg" v-if="모달창열렸니 == true">
<div class="white-bg">
<h4>{{rooms[누른거].title}}</h4>
<p>{{rooms[누른거].content}}</p>
<button @click="$emit('closeModal',false)">닫기</button>
<!-- <input @input="month = $event.target.value"> -->
<!--$event=> event object js에서 e랑 동일 -->
<input v-model="month">
<!--
v-model은 "여기 입력된 값을 data로 바로 저장해주세요~" 라는 문법
v-model.number => 데이터 저장될때 숫자형으로 변형돼서 저장됨
-->
{{ month }}
</div>
</div>
</Transition>
</template>
<script>
export default {
name: "Modal",
data() {
return {
month: 0
}
},
props: {
// props 받은거 등록
// props:{데이터이름:자료형이름}
rooms: Array,
누른거: Number,
모달창열렸니: Boolean,
},
// watch:{} 특정 데이터가 변경될 때마다 실행되는 코드
// 함수명을 감시하고 싶은 데이터명으로 작명
// 파라미터 2개(변경될값,변경전값)
watch: {
month(a) {
if (isNaN(a) == true) {
alert('숫자만 입력하세요.');
this.month = 1
}
// else if ( a == 2) {
// alert('2개월은 너무 적음.. 안팝니다')
// this.month = 3
// }
}
},
updated() {
console.log("업데이트 되었습니다.");
if (this.month == 2) {
alert("2개월은 너무 적음.. 안팝니다");
this.month = 3; // 값 변경을 통해 다시 updated()가 호출되는 것을 방지합니다.
}
}
}
</script>
<style>
.modal-enter-from {
opacity: 0;
}
.modal-enter-active {
transition: all 1s;
}
.modal-enter-to {
opacity: 1;
}
</style>
<!--
클래스명-enter-from: 애니메이션 동작 전 상태
클래스명-enter-active: 애니메이션 동작 중 상태, 대부분 transition 이런거
클래스명-enter-to: 애니메이션 동작 후 상태
-->
