인프런 커뮤니티 질문&답변
작성한 질문수
this.$refs에 값이 들어가는 시점이 언제인가요?
작성
·
802
·
수정됨
0
vue 버전은 3.0.0입니다
<template>
** orderStatusCategory는 객체를 담은 배열 형태로
[{code_value: CANCEL, code_text: 주문취소}, {code_value: REQUEST, code_text: 주문요청}...]
형태입니다. 그리고 orderStatusCategory는 api를 통해 비동기적으로 받아오고요
그래서 저는 orderStatusCategory에 값이 할당되면 this.$refs에도 값이 들어 있을 거라고 생각했는데 아무 값도 안 들어있습니다
mounted랑 메서드
위 코드에서 this.orderStatusCategory에 값이 들어왔는데도 불구하고 this.$refs에는 여전히 아무 값도 안 들어있습니다
근데 버튼을 클릭하면 그 때는 this.$refs에 정상적으로 DOM 요소들이 들어있습니다.
질문 1) 왜 이런 건가요? 정확히 언제 this.$refs에 값이 들어가는 거죠?
질문 2) v-for로 버튼을 만들었는데 이렇게 만든 버튼들마다 다른 CSS를 주고 싶을 때는 ref로 접근하는 게 최선이죠?(v-for 하는 배열은 고정된 게 아니고 api로 받아올 때마다 바뀝니다)
답변 1
1
짐코딩
지식공유자
안녕하세요.
두번 째 Callback 함수에서는 정상적으로 출력 되었다면,
첫번 째 (출력 안된곳) Callback 함수에서 this.$nextTick를 활용하여 DOM이 업데이트된 이후에 출력해 보시겠어요?
this.$nextTick(() => {
console.log(this.$refs);
});
// 또는
await this.$nextTick();
console.log(this.$refs);