select box에서의 prop 활용 질문드립니다 !.

Question

셀렉트박스 기능을 활용하는데 오류가 나는데 고치지를 못하겠습니다. <부모> [템플릿 영역] < select-box v-model =" preselect_value " : items =" items " : input_id =" 'my_selectbox' " @ input =" value => { preselect_value = value ; } " > [Data 영역] data () { return { preselect_value: null , items: [ "1994" , "1992" ] <자식> [템플릿영역] < select v-model =" this . value " class = "custom-select" v-bind : id =" input_id " v-on : input =" updateValue ( $event . target . value )" > < option v-for ="( item , index ) in items " : value =" item " : key =" index " > {{ item }} data () { return { // }; }, props: [ "value" , "items" , "input_id" ], methods: { updateValue : function ( value ) { this . $emit ( "input" , value ); } } <오류메시지> 제가 어떤점에서 실수를 하고 있었을까요? 알려주시면 감사하겠습니다.

캡틴판교 · Answer

안녕하세요 영찬님 제가 답변이 늦어져서 죄송합니다 :) 좋은 질문 주셨네요. 일단 위 코드에서 2가지 부분을 다시 살펴보시라고 말씀 드리고 싶습니다. 1. v-model의 내부 동작 v-model 디렉티브는 :value와 @input의 조합으로 동작합니다. 아래 글 참고해보시면 좀 더 이해하시기 수월할거에요 :) https://joshua1988.github.io/web-development/vuejs/v-model-usage/ 위 내용 참고해서 input 태그의 value 값과 input 이벤트를 연결하는 로직을 변경해보시면 좋을 것 같습니다. 2. 템플릿 표현식 간결화 첨부해주신 첫 번째 코드를 보면 @input="value => {}" 이런 식으로 코드를 작성하였습니다. 뷰에서 권고하는 템플릿 표현식 작성 방법은 최대한 데이터의 표현을 단순화 해서 나타내는 것입니다. 이렇게 했을 때 코드의 가독성 뿐만 아니라 현재처럼 에러가 발생하였을 때의 디버깅 상황이 훨씬 수월해집니다. 정리해서 아래와 같이 코드를 작성해보시면 좋을 것 같습니다. @input="handleInput" methods: {   handleInput(event) {     // console.log(event);     // debugger;     this.preselect_value = event.target.value;   } } 이렇게 하시면 중간에 어떤 값이 오는지 콘솔에 찍어볼 수 도 있고 디버거를 달아서 디버깅도 해볼 수 있습니다 :) 강의 수강해 주셔서 감사합니다 :)