OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why is my Vuetify v-select sending [object Object] instead of the selected value in Vue 3?

  • Thread starter Thread starter Michael
  • Start date Start date
M

Michael

Guest
I'm working on a Vue 3 project using Vuetify, and I'm having trouble with a v-select component. The selected value is being sent as [object Object] instead of the actual value.

Here is a simplified version of my code:

Parent Component

Code:
<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        <v-card class="mb-4" rounded>
          <template v-slot:title>
            <span class="font-weight-black">Abc</span>
          </template>
          <v-card-text>
            <v-form>
              <FormFields :form="form" />
              <SubmitButton :loading="loading" :submitForm="submitForm" />
              <v-col cols="12" v-if="error">
                <v-alert :value="true" type="error" dismissible>
                  {{ error }}
                </v-alert>
              </v-col>
              <ComponentStatusSelect
                :result="result"
                :selectedComponentStatus="selectedComponentStatus"
                @update:selectedComponentStatus="val => selectedComponentStatus = val"
              />
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6">
        <v-card class="mb-4" rounded v-if="result">
          <template v-slot:title>
            <span class="font-weight-black">Customer Information</span>
          </template>
          <v-card-text>
            <b>Name:</b> {{ `${result.firstName} ${result.lastName}` }}<br />
            <b>Date of Birth:</b> {{ result.dateOfBirth }}<br />
            <b>Id:</b> {{ result.Id }}<br/><br/>
            <b>Address:</b> {{ `${result.streetName} ${result.postalCode} ${result.postalArea}` }}<br/>
            <b>Id:</b> {{ result.Id }}<br /><br />
            <b>Component:</b> {{ componentEvaluation }}<br/>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { useRuntimeConfig } from '#imports';
import FormFields from './FormFields.vue';
import SubmitButton from './SubmitButton.vue';
import ComponentStatusSelect from './ComponentStatusSelect.vue';

const config = useRuntimeConfig();

const form = ref({
  firstName: '',
  lastName: '',
  dateOfBirth: '',
  dNumber: '',
});

const result = ref(null);
const ComponentEvaluation = ref('');
const selectedComponentStatus = ref('');
const loading = ref(false);
const error = ref(null);

const submitForm = async () => {
  loading.value = true;
  error.value = null;
  result.value = null;
  try {
    const response = await {...}
    result.value = response.data;
    Component.value = response.data.ComponentStatus || 'N/A';
  } catch (err) {
    error.value = 'Error generating customer: ' + err.message;
    console.error('Error generating customer:', err);
  } finally {
    loading.value = false;
  }
};

const changeComponentEvaluation = async () => {
  if (!result.value || !result.value.Id) {
    error.value = 'No valid customer to update';
    return;
  }
  loading.value = true;
  console.log('Changing Component status to:', selectedComponentStatus);
  try {
    const response =
    ComponentEvaluation.value = response.data.ComponentStatus;
  } catch (err) {
    error.value = 'Error changing Component: ' + err.message;
    console.error('Error changing Component:', err);
  } finally {
    loading.value = false;
  }
};

watch(selectedComponentStatus, (newStatus) => {
  console.log('New selected Component status:', newStatus);
  if (newStatus) {
    changeComponentEvaluation();
  }
});
</script>

Child Component (ComponentStatusSelect.vue)

Code:
<template>
  <v-col cols="12" v-if="result">
    <v-select
      :model-value="selectedComponentStatus"
      @update:model-value="updateSelectedComponentStatus"
      :items="ComponentStatusOptions"
      label="Change Component"
      item-title="text"
      item-value="value"
      outlined
      dense
    ></v-select>
  </v-col>
</template>

<script setup>
const props = defineProps({
  result: Object,
  selectedComponentStatus: String,
});

const componentStatusOptions = [
  { text: 'A', value: 'A' },
  { text: 'M ', value: 'M' },
  { text: 'D', value: 'D' },
  { text: 'F', value: 'F' },
];

const emit = defineEmits(['update:selectedComponentStatus']);

const updateSelectedComponentStatus = (value) => {
  emit('update:selectedComponentStatus', value);
};
</script>

Problem When I select an option from the v-select, the value sent to the backend is [object Object] instead of the actual value.

What I've Tried

  1. Verified that the componentStatusOptions have text and value properties.
  2. Ensured the v-select uses item-title="text" and item-value="value".
  3. Added console logs to verify the selected value.

Expected Behavior The selected value should be sent as the corresponding string (e.g., 'A', 'M', 'D').

Actual Behavior The selected value is being sent as [object Object].

<p>I'm working on a Vue 3 project using Vuetify, and I'm having trouble with a v-select component. The selected value is being sent as [object Object] instead of the actual value.</p>
<p>Here is a simplified version of my code:</p>
<p><strong>Parent Component</strong></p>
<pre><code><template>
<v-container>
<v-row>
<v-col cols="12" md="6">
<v-card class="mb-4" rounded>
<template v-slot:title>
<span class="font-weight-black">Abc</span>
</template>
<v-card-text>
<v-form>
<FormFields :form="form" />
<SubmitButton :loading="loading" :submitForm="submitForm" />
<v-col cols="12" v-if="error">
<v-alert :value="true" type="error" dismissible>
{{ error }}
</v-alert>
</v-col>
<ComponentStatusSelect
:result="result"
:selectedComponentStatus="selectedComponentStatus"
@update:selectedComponentStatus="val => selectedComponentStatus = val"
/>
</v-form>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="6">
<v-card class="mb-4" rounded v-if="result">
<template v-slot:title>
<span class="font-weight-black">Customer Information</span>
</template>
<v-card-text>
<b>Name:</b> {{ `${result.firstName} ${result.lastName}` }}<br />
<b>Date of Birth:</b> {{ result.dateOfBirth }}<br />
<b>Id:</b> {{ result.Id }}<br/><br/>
<b>Address:</b> {{ `${result.streetName} ${result.postalCode} ${result.postalArea}` }}<br/>
<b>Id:</b> {{ result.Id }}<br /><br />
<b>Component:</b> {{ componentEvaluation }}<br/>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { useRuntimeConfig } from '#imports';
import FormFields from './FormFields.vue';
import SubmitButton from './SubmitButton.vue';
import ComponentStatusSelect from './ComponentStatusSelect.vue';

const config = useRuntimeConfig();

const form = ref({
firstName: '',
lastName: '',
dateOfBirth: '',
dNumber: '',
});

const result = ref(null);
const ComponentEvaluation = ref('');
const selectedComponentStatus = ref('');
const loading = ref(false);
const error = ref(null);

const submitForm = async () => {
loading.value = true;
error.value = null;
result.value = null;
try {
const response = await {...}
result.value = response.data;
Component.value = response.data.ComponentStatus || 'N/A';
} catch (err) {
error.value = 'Error generating customer: ' + err.message;
console.error('Error generating customer:', err);
} finally {
loading.value = false;
}
};

const changeComponentEvaluation = async () => {
if (!result.value || !result.value.Id) {
error.value = 'No valid customer to update';
return;
}
loading.value = true;
console.log('Changing Component status to:', selectedComponentStatus);
try {
const response =
ComponentEvaluation.value = response.data.ComponentStatus;
} catch (err) {
error.value = 'Error changing Component: ' + err.message;
console.error('Error changing Component:', err);
} finally {
loading.value = false;
}
};

watch(selectedComponentStatus, (newStatus) => {
console.log('New selected Component status:', newStatus);
if (newStatus) {
changeComponentEvaluation();
}
});
</script>
</code></pre>
<p>Child Component (ComponentStatusSelect.vue)</p>
<pre><code><template>
<v-col cols="12" v-if="result">
<v-select
:model-value="selectedComponentStatus"
@update:model-value="updateSelectedComponentStatus"
:items="ComponentStatusOptions"
label="Change Component"
item-title="text"
item-value="value"
outlined
dense
></v-select>
</v-col>
</template>

<script setup>
const props = defineProps({
result: Object,
selectedComponentStatus: String,
});

const componentStatusOptions = [
{ text: 'A', value: 'A' },
{ text: 'M ', value: 'M' },
{ text: 'D', value: 'D' },
{ text: 'F', value: 'F' },
];

const emit = defineEmits(['update:selectedComponentStatus']);

const updateSelectedComponentStatus = (value) => {
emit('update:selectedComponentStatus', value);
};
</script>

</code></pre>
<p><strong>Problem</strong>
When I select an option from the v-select, the value sent to the backend is [object Object] instead of the actual value.</p>
<p><strong>What I've Tried</strong></p>
<ol>
<li>Verified that the componentStatusOptions have text and value properties.</li>
<li>Ensured the v-select uses item-title="text" and item-value="value".</li>
<li>Added console logs to verify the selected value.</li>
</ol>
<p><strong>Expected Behavior</strong>
The selected value should be sent as the corresponding string (e.g., 'A', 'M', 'D').</p>
<p><strong>Actual Behavior</strong>
The selected value is being sent as [object Object].</p>
 

Latest posts

M
Replies
0
Views
1
Muhammad Ikhwan Perwira
M
Top