Diary, Vue - 삽질..

error 라고 할만한건 아니지만 그냥 오늘 오타에서 한참 해맨 것과 같은 종류의 삽질이다.

근래에 갑자기 Vue 를 사용하여 입력양식 (form)을 작성하게 될 일이 생겼다.

BE에서 받은 데이터로 input 을 그려주는 형태였는데 select 에서 기본값이 세팅이 의도대로 세팅이 안되는 것이었다!

<template>
	<fragment>
    <select name="people" v-model="selected">
      <option value="" disabled selected hidden>선택해주세요</option>
    </select>
  </fragement>
</template>

<script>
export default {
  data() {
    return {
      selected: null  // selected: '',
    }
  }
}
</script>

간단히 위와 같은 코드였었는데 지금 보면 한 눈에 보여서 뭔가 의심가는 부분이 보이겠지만 생각보다 찾는데 오래 걸렸다.. ㄷ

의심가는 부분이 정답이다. data 내에 정의된 selected = null 이 문제였다. 전에도 한 번 이런 적이 있던거 같은데 다시 한번 재발 방지를 위해 글을 남긴다.