[Vue] computed 사용할 때 파라메터 넘기기

 

아래와 같이 사용하면 됩니다.

<script setup>
const alertColor = computed(() => (num) =>{
  return num % 2 ? 'white' : 'black'
})
</script>


<template>
    <VCardItem v-for="(myNumber, index) in numberList" :key="index">
        <VAlert
            :color="alertColor(myNumber)">
            Hello~ Bryan~
        </VAlert>
    </VCardItem>
</template>

 

 

const alertColor = computed(()=>(num) =>{  ...

이 부분이 중요한거 같은데요. computed( (num) => { ... 로 사용하니 안되더라고요.

간단한 조건문 같은 경우는 굳이 computed 를 사용하지 않아도 될거같아요.

<template>
    <VCardItem v-for="(myNumber, index) in numberList" :key="index">
        <VAlert
            :color="myNumber % 2 ? 'white' : 'black'">
            Hello~ Bryan~
        </VAlert>
    </VCardItem>
</template>

 

저는 저 조건문의 변수가 상황에 따라 바뀌고, 경우의 수도 다양해서 computed 를 사용하려고 알아봤습니다.