v-if v-else 에서 $refs 값이 나오지 않을 때 삽질중이라면

오늘의 삽질! 

 

<span
    v-if="status === false"
/>
<Textinput
	v-else
    ref="groupName"
/>

status 가 true이냐 false 이냐 에 따라 span 태그가 출력되거나 Textinput이 출력됩니다.

v-if, v-else 는 조건에 맞는 부분만 렌더링을 하기 때문에 어떤 버튼의 의해 해당 조건이 바뀌어 화면에 보이는 것이 바뀐다면 $refs에서 값이 없다고 나옵니다.

$this.$refs.groupName //undefined

v-show 를 사용한다면 해당 부분 렌더링을 한 후 display: none으로 보이지 않게만 만들기에 $refs에는 값이 나옵니다. 

<span
    v-show="status === false"
/>
<Textinput
	v-show="status === true"
    ref="groupName"
/>