v-if 질문입니다!

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

조건부 렌더링 (v-if, v-show)

작성

425

<td v-if="stock">
  {{ stock !== -1 ? stock : stock = false}}
</td>
<td v-else><v-icon>mdi-infinity</v-icon></td>

제 생각 : stock이 -1이라는 값으로 넘어오면

{{ stock !== -1 ? stock : stock = false}}

로 인해 stock이 false가 되고 v-else의 아이콘이 보여짐

현실 : stock가 -1이라는 값으로 넘어오면 v-if 태그가 false 값이 출력됨

뭐가 문제인가요?

답변 1

v-if="stock" 이라서 stock 값이 있기 때문에 v-else로 넘어가지 않고, v-if로 들어가는 거 같은데요.

-1 값이 넘어왔으니 stock을 바로 출력하지 않고 stock = false 가 되면서 false 출력

지식공유자

넵 맞습니다 🙂

자바스크립트에서 false와 거짓 같은 값을 제외하고는 모두 true로 인식됩니다. 즉, -1도 true로 인식되어 v-if문을 수행하게 됩니다.
(MDN 참고 거짓 같은 값(Falsy) - Boolean 문맥에서 false로 평가되는 값)

그렇기 때문에 찬미님 답변과 같이 false가 출력된 것입니다.

질문자

넵 그래서 저는 아래와 같이 동작할 거라고 예상했습니다

재생각 : stock이 -1이니까 v-if 태그 나옴 -> {{ }} 내부 삼항연산자로 state = false 값이 됨 -> v-if="false" -> v-else 태그 출력

v-if = "stock" 인데 {{ stock = false }} 값이 출력되고 있는 게 이해가 안갑니다 ㅠㅠ

** 참고로 stock은 data() 옵션 API를 이용해 정의했습니다

이미 조건문 안으로(v-if) 들어온 후라서 또 다시 검사하지 않습니다

만약 또 다시 검사하면 무한반복으로 검사하는걸까요? 그 순간 그 상태값으로 검사한다고 생각하면 될 거 같아유

질문자

저장 문제였던 걸까요?

다시 해보니까 제 의도대로 작동하네요 ㅠㅠ

근데 찬미씨 말씀대로 무한반복 문제가 발생할 수 있어서 그냥 v-if 에 stock === -1 여부를 검사한는 게 좋을 거 같아요!

엑..뭔가 이상하네용... 제가 이해한대로라면 아래 코드처럼 작성하는 게 나을듯요..?

stock이 존재하고, -1이 아니라면 출력, 아니면 아이콘 출력..

<td v-if="stock && stock !== -1">
  {{ stock }}
</td>
<td v-else><v-icon>mdi-infinity</v-icon></td>

인프런 커뮤니티 질문&답변