<script setup>~ </script> 안에서 computed 값을 출력하는 방법이 있을까요?
703
작성한 질문수 3
선생님 안녕하세요~
학습 중에 아래와 같은 상황이 생겨서 질문드립니다.
vuex store에 있는 itemList Object를 computed로 가져오는
반응성이 있는 변수 solvedIndex가 있습니다.
이 변수의 값을
<template> ~ </template> 안에서는 2가 잘 출력 되는데,
<script setup> ~ </script> 안에서 접근하려면, "ComputedRefImpl" 이 출력이 됩니다.
어떻게 하면, solvedIndex의 값을 출력할 수 있을까요?
solvedIndex는 isSolved === true 인 인덱스를 뒤에서 부터 찾는 코드입니다.
state: () => {
return {
itemList: [
{
"id": 101,
"isSolved": true,
},
{
"id": 102,
"isSolved": true,
},
{
"id": 103,
"isSolved": true,
},
{
"id": 104,
"isSolved": false
},
{
"id": 105,
"isSolved": false
}
]
};
}
<script setup>
const itemList= computed(() => store.state.itemList));
const solvedIndex = computed(() => store.state.itemList.findLastIndex((item) => item.isSolved === true));
// index와 slovedIndex.value가 같은 경우, 분기 처리
const alertFunction = (index) => {
if(index === solveIndex.value) {
console.log('idx === solveIndex : ', idx === solveIndex.value);
} else {
console.log('idx === solveIndex : ', idx === solveIndex.value);
}
}
</script>
<template>
<button
v-for="(item, index) in itemList"
:key="index"
:class="{
disabled: index !== solvedIndex
}"
@click="alertFunction(index)"
>{{ solvedIndex }}</button>
</template>
<script setup> ~ </script> 안에서 접근하려면, 아래와 같이 출력이 됩니다.
방법: 1
console.log('findLastIndex: ', solvedIndex );
방법: 2
console.error('findLastIndex: ', solvedIndex.value);
답변 1
1
안녕하세요 :)
🤔 script setup 안에서 반응형 데이터(computed API로 선언된)의 값을 출력하기 위해선 .value를 붙여야 합니다. <template>안에서는 안붙여도 되고요.(자동으로 언래핑됨)
혹시 기본편을 보셨을까요? 안보셨다면 권장드려요 🥲
1
답변 감사합니다. ^^
"기본 편"은 먼저 학습했습니다.
어제는. value로 접근해도 안 됐는데,
vscode 재실행 했더니, 잘 돼서 해결했습니다. ^^;
좋은 강의 해 주셔서 감사합니다~~~ ^^
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
40
2
강의듣다가 헷갈려서 질문드립니다.
0
35
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
33
1
질문드립니다.
0
33
2
라우터 인스톨 후 실행안됨
1
50
2
코드 자동 포매팅 질문
0
71
2
필터 watchEffect 질문입니다.
0
52
1
json-server 오류가 다른게 뜨네요
0
114
1
미리보기가 안됩니당...
0
70
2
unplugin-vue-components
0
86
2
TypeError 질문
0
53
1
v-model="show" :show="show" 같이 사용?
1
58
1
hash 모드 배포의 필요성?
0
63
2
.eslintrc.cjs 가 없습니다
0
96
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
65
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
73
2
중첩된 컴포넌트 문제
0
76
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
114
1
axios timeout
0
332
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
124
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
170
2





