• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

20.09.08 14:09 작성 조회수 414

1

셀렉트박스 기능을 활용하는데 오류가 나는데 고치지를 못하겠습니다. 

<부모>

[템플릿 영역]

 <select-box
              v-model="preselect_value"
              :items="items"
              :input_id="'my_selectbox'"
              @input="
                value => {
                  preselect_value = value;
                }
              "
            ></select-box>

 

[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 }}</option>
  </select>

<Data 영역>

 data() {
    return {
      //
    };
  },

  props: ["value", "items", "input_id"],

  methods: {
    updateValue: function(value) {
      this.$emit("input", value);
    }
  }

<오류메시지>



제가 어떤점에서 실수를 하고 있었을까요?
알려주시면 감사하겠습니다.

course-thumbnail

Vue.js 끝장내기 - 실무에 필요한 모든 것

답변 1

답변을 작성해보세요.

0

장기효(캡틴판교)님의 프로필

장기효(캡틴판교)

지식공유자

2020.09.16

안녕하세요 영찬님 제가 답변이 늦어져서 죄송합니다 :)

좋은 질문 주셨네요. 일단 위 코드에서 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;

  }

}

이렇게 하시면 중간에 어떤 값이 오는지 콘솔에 찍어볼 수 도 있고 디버거를 달아서 디버깅도 해볼 수 있습니다 :)

강의 수강해 주셔서 감사합니다 :)

이 글과 비슷한 Q&A