Vue, 자바스크립트 this 질문 드립니다.

Question

안녕하세요 초보자 입니다.vue 와 fullcalendar 를 이용해서 개발중인데요..날짜를 클릭 하면 (dateClick 함수) 모달창을 띄우고 싶은데..아래와 같은 vue 코드가 있을 때 dateClick 이 풀캘린더에서 호출 되는 함수라modal 변수 값을 읽어오질 못하네요this.modal 하면 당연히 호출자인 Calendar 객체는 modal 변수가 없고.....어떻게 modal 값을 조작 할 수 있을까요?고수님들 답변 좀 부탁 드리겠습니다. methods : { test : function () { alert(1); } }, data() { return { modal : false, calendarOptions: { plugins: [ dayGridPlugin, interactionPlugin ], initialView: 'dayGridMonth', locale: 'ko', selectable: true, dateClick : function (info) { console.log(&#34;click&#34;,info.dateStr); console.log(&#34;this&#34;,this.modal); } } } }

183183 · Answer

data() 내부에 함수를 쓰면 안되지않나요? 제가 그렇게 써본적이 없어서..dataClick 함수를 methods 에 넣으시고 거기서 this.modal &#61; true 이런식으로 사용하셔야 될 것 같네요

183183 · Answer

공식문서에 나와있네요export default { components: { FullCalendar // make the <FullCalendar> tag available }, data() { return { calendarOptions: { plugins: [ dayGridPlugin, interactionPlugin ], initialView: 'dayGridMonth', weekends: false // initial value } } }, methods: { toggleWeekends: function() { this.calendarOptions.weekends &#61; !this.calendarOptions.weekends // toggle the boolean! } } }

연구인 · Answer

183183 님 답변 대단히 감사합니다그런데 dateClick 이 같이 calendarOption으로 넘어가야 FullCalendar 에서 날짜를 눌렀을때 호출이 가능합니다..일단 해결 방법은 알았는데, this 바인딩 방법 같은걸로 modal 에 접근이 가능한지 궁금하네요..

개발세발개발자 · Answer

this에 접근하시려면 function을 arrow function으로 바꾸셔야 할 것 같습니다. 저도 예전에 이런 이슈가 있어서 arrow function으로 바꾸니까 this에 접근이 가능하더라구요 dateClick : function (info) { console.log(&#34;click&#34;,info.dateStr); console.log(&#34;this&#34;,this.modal); } dateClick: () &#61;> { this.modal &#61; true } 이런식으로 바꾸시고 아마 info.dateStr에 있는 date값은 FullCalendar 컴포넌트에 v-model로 지정해서 가져올수 있지 않을까 싶은데.. 참고가 되셨으면 좋겠습니다. https://medium.com/&#64;hozacho/vuejs%EC%97%90%EC%84%9C-arrow-function%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-ec067c342412 해당 글도 참고되시길 바라며..ㅎㅎ

183183 · Answer

https://fullcalendar.io/docs/vue여기서 props and emitted event 섹션 말씀하시는 것 같은데 참고 부탁드립니다

Vue, 자바스크립트 this 질문 드립니다.

5개의 답변

Q&A 목록