I'm currently tackling a Vue 3 project with Vuetify, and I've encountered an issue involving a v-select component. The selected value is appearing as [object Object] instead of its actual value.
Here's a simplified snippet of my code:
Parent Component
<template>
<v-container>
...
</v-container>
</template>
<script setup>
...
</script>
Child Component (ComponentStatusSelect.vue)
<template>
...
</template>
<script setup>
...
</script>
Issue: Upon selection in the v-select, the sent backend value displays as [object Object] rather than the expected value.
Solutions Attempted:
- Validated that the componentStatusOptions contain text and value properties.
- Confirmed that the v-select uses item-title="text" and item-value="value" attributes.
- Inserted console logs to check the selected value.
Desired Outcome: The selected value should be transmitted as a corresponding string (e.g., 'A', 'M', 'D').
Current Outcome: The chosen value registers as [object Object].