Vue3中Vuetify v-select传值为[object Object]而非实际值的问题

问题现象 #

开发基于Vue3和Vuetify的项目时，使用v-select组件选择选项后，发送到后端的值是[object Object]，而非预期的字符串值（如'A'、'M'等）。

代码片段 #

父组件 #

<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;
    componentEvaluation.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.value);
  try {
    const response = await axios.patch(`${config.public.apiBaseUrl}/v1/test/${result.value.id}/test`, null, {
      params: {
        componentStatus: selectedComponentStatus.value
      }
    });
    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>

子组件（ComponentStatusSelect.vue） #

<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>

已尝试操作 #

• 验证componentStatusOptions包含text和value属性
• 确保v-select使用了item-title="text"和item-value="value"
• 添加控制台日志验证选中的值

问题根源及解决方案 #

1. 子组件v-select的items属性大小写错误 #

子组件中定义的选项数组是componentStatusOptions（小写c），但模板中写的是ComponentStatusOptions（大写C），导致v-select无法正确加载选项，选中时返回整个对象而非指定的value字段。
修复：将模板中的ComponentStatusOptions改为componentStatusOptions。

2. 父组件中未正确获取ref的value值 #

selectedComponentStatus是Vue3的ref对象，直接传递该对象会被转为[object Object]，必须通过.value获取实际值。
修复：

• 在changeComponentEvaluation函数的console.log中改为selectedComponentStatus.value
• 在axios请求的params中改为componentStatus: selectedComponentStatus.value

3. 父组件函数语法错误 #

changeComponentEvaluation函数缺少闭合的}，导致代码语法错误，影响逻辑正常执行。
修复：添加函数的闭合}。

4. 父组件变量名拼写错误 #

原代码中ComponentEvaluation和component变量名大小写不一致，导致赋值错误。
修复：统一变量名为componentEvaluation，确保赋值时使用.value。

验证修改后效果 #

修改完成后，选择v-select选项时，控制台会打印正确的字符串值，发送到后端的参数也会是预期的字符串（如'A'、'M'等）。

内容的提问来源于stack exchange，提问作者Michael