javascriptvue.jsvuejs3

How to get the value from a proxy object in Vue js


I am trying to access the value of the "color" from a proxy object.

This is my code

<script setup>
const props = defineProps({status:Object});
    
function getColor(items){
    const currentStatus = props.status;

    const output = currentStatus.filter((item)=>{
            if(items.status === item.status){
                return item
            }
    })

    return output.color;
    //return output.["color"];
    //return (output, "color");

}

</script>

<template>
    <div class="p-5">
         <v-data-table
             :search="search"
             :headers="headers"
             :items="transactions">
             <template v-slot:[`item.status`]="{item}">
                 <v-chip :color="getColor(item)" variant="elevated" label>{{ item.status }}</v-chip>
             </template>
         </v-data-table>
    </div>
</template> 

this is the snap image of the data am getting after the filter

enter image description here

I hope someone will point out what missing here.

thanks


Solution

  • I got it by using for loop.

    for (let [key, value] of Object.entries(output)){
            return value.color;
        }