v-autocomplete数据传递异常求助：无法加载客户名称数据

我正在实现v-autocomplete可搜索选择器组件，但无法正常传递客户名称数据，浏览器控制台提示数据无效，已经卡了一周。以下是我的代码和请求返回的数据：

组件代码 #

<template>
  <v-container class="d-flex align-center justify-center">
    <v-form @submit.prevent="createLicense" ref="form">
      <!-- 客户选择器 -->
      <v-autocomplete
        v-model="selectedClient"
        :items="clients"
        item-text="Nome"  
        item-value="Id"   
        label="选择客户"
        :loading="loadingClients"
        no-data-text="未找到客户"
        outlined
        dense
      ></v-autocomplete>

      <!-- 系统选择器 -->
      <v-autocomplete
        v-model="selectedSystem"
        :items="systems"
        item-text="Nome"  
        item-value="Id"   
        label="选择系统"
        :loading="loadingSystems"
        no-data-text="未找到系统"
        outlined
        dense
      ></v-autocomplete>

      <!-- 有效期字段 -->
      <v-text-field 
        v-model="dataValidade" 
        label="有效期" 
        type="date"
        :rules="[v => !!v || '有效期为必填项']" 
        required 
        outlined 
        dense
      ></v-text-field>

      <!-- 受限用户数量字段 -->
      <v-text-field 
        v-model="qtdeUsuariosLimitados" 
        label="受限用户数量" 
        type="number"
        :rules="[v => v >= 0 || '必须为非负数']" 
        required 
        outlined 
        dense
      ></v-text-field>

      <!-- 无限制用户数量字段 -->
      <v-text-field 
        v-model="qtdeUsuariosIlimitados" 
        label="无限制用户数量" 
        type="number"
        :rules="[v => v >= 0 || '必须为非负数']" 
        required 
        outlined 
        dense
      ></v-text-field>

      <!-- 提交按钮 -->
      <v-btn type="submit" color="primary" class="mt-4" large>注册许可证</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import LicenseService from '@/services/Licenses/licenses';
import ClientService from '@/services/Clients/clients';
import SystemService from '@/services/Systems/systems';

export default {
  data() {
    return {
      clients: [],
      systems: [],
      selectedClient: null,
      selectedSystem: null,
      loadingClients: false,
      loadingSystems: false,
      dataValidade: '',
      qtdeUsuariosLimitados: '',
      qtdeUsuariosIlimitados: '',
    };
  },
  methods: {
    async getClients() {
      this.loadingClients = true;
      try {
        const response = await ClientService.getAllClients();
        this.clients = response.value.map(({ $id, ...rest }) => rest); // 移除不必要的字段
      } catch (error) {
        this.$toast.error('获取客户失败');
      } finally {
        this.loadingClients = false;
      }
    },
    async getSystems() {
      this.loadingSystems = true;
      try {
        const response = await SystemService.getAllSystems();
        this.systems = response.value;
      } catch (error) {
        this.$toast.error('获取系统失败');
      } finally {
        this.loadingSystems = false;
      }
    },
    async createLicense() {
      if (!this.$refs.form.validate()) {
        return;
      }

      if (!this.selectedClient || !this.selectedSystem) {
        this.$toast.error('请选择客户和系统。');
        return;
      }

      try {
        const selectedClient = this.clients.find(client => client.Id === this.selectedClient);
        const selectedSystem = this.systems.find(system => system.Id === this.selectedSystem);

        const licenseData = {
          Id: 0,
          Cliente: {
            Id: selectedClient.Id,
            Chave: selectedClient.Chave,
            Nome: selectedClient.Nome,
            Email: selectedClient.Email,
            Telefone: selectedClient.Telefone
          },
          Sistema: {
            Id: selectedSystem.Id,
            Nome: selectedSystem.Nome
          },
          Ativa: true,
          DataValidade: this.dataValidade,
          QtdeUsuariosLimitados: this.qtdeUsuariosLimitados,
          QtdeUsuariosIlimitados: this.qtdeUsuariosIlimitados
        };

        await LicenseService.createLicense(licenseData);
        this.$router.push({ name: 'LicenseList' });
        this.$toast.success('许可证注册成功！');
      } catch (error) {
        this.$toast.error('注册许可证失败！');
      }
    }
  },
  created() {
    this.getClients();
    this.getSystems();
  }
};
</script>

<style scoped></style>

请求返回数据 #

系统数据 #

{
    "value": [
        {
            "$id": 1,
            "Id": 8,
            "Nome": "Sistema1"
        },
        {
            "$id": 2,
            "Id": 9,
            "Nome": "Sistema2"
        },
        {
            "$id": 3,
            "Id": 10,
            "Nome": "sistema3"
        }
    ]
}

客户数据 #

{
    "value": [
        {
            "$id": 1,
            "Id": 2,
            "Chave": "042176ec-7a2c-499e-881a-496a2c14fa64",
            "Nome": "cliente",
            "Email": "cliente1@gmail.com",
            "Telefone": "99999999"
        },
        {
            "$id": 2,
            "Id": 3,
            "Chave": "ce8fc289-1e68-48e3-9468-4ec1d02ab205",
            "Nome": "cliente2",
            "Email": "cliente2@gmail.com",
            "Telefone": "99999999"
        },
        {
            "$id": 3,
            "Id": 4,
            "Chave": "5d48b749-f724-4479-ad69-e1d408fa677c",
            "Nome": "Cliente3",
            "Email": "cliente3@gmail.com",
            "Telefone": "999999999"
        },
        {
            "$id": 4,
            "Id": 5,
            "Chave": "0d595f88-a350-48dd-a014-d5826459b4f0",
            "Nome": "Cliente4",
            "Email": "Cliente4@gmail.com",
            "Telefone": "999999999"
        }
    ]
}

问题排查与修复方案 #

1. 解决客户对象查找失败问题 #

当前通过find方法根据ID匹配客户对象，存在类型不匹配或异步加载未完成导致对象不存在的风险，直接引发后续访问selectedClient.Nome等字段的错误。

最优修复是给v-autocomplete添加return-object属性，让v-model直接绑定选中的完整对象，无需手动查找：

<!-- 客户选择器新增return-object -->
<v-autocomplete
  v-model="selectedClient"
  :items="clients"
  item-text="Nome"  
  item-value="Id"   
  label="选择客户"
  :loading="loadingClients"
  no-data-text="未找到客户"
  outlined
  dense
  return-object
></v-autocomplete>

<!-- 系统选择器同样新增return-object -->
<v-autocomplete
  v-model="selectedSystem"
  :items="systems"
  item-text="Nome"  
  item-value="Id"   
  label="选择系统"
  :loading="loadingSystems"
  no-data-text="未找到系统"
  outlined
  dense
  return-object
></v-autocomplete>

同时修改createLicense方法，直接使用绑定的对象：

async createLicense() {
  if (!this.$refs.form.validate()) {
    return;
  }

  if (!this.selectedClient || !this.selectedSystem) {
    this.$toast.error('请选择客户和系统。');
    return;
  }

  try {
    const licenseData = {
      Id: 0,
      Cliente: {
        Id: this.selectedClient.Id,
        Chave: this.selectedClient.Chave,
        Nome: this.selectedClient.Nome,
        Email: this.selectedClient.Email,
        Telefone: this.selectedClient.Telefone
      },
      Sistema: {
        Id: this.selectedSystem.Id,
        Nome: this.selectedSystem.Nome
      },
      Ativa: true,
      DataValidade: this.dataValidade,
      // 将字符串转数字，避免后端类型校验失败
      QtdeUsuariosLimitados: Number(this.qtdeUsuariosLimitados),
      QtdeUsuariosIlimitados: Number(this.qtdeUsuariosIlimitados)
    };

    await LicenseService.createLicense(licenseData);
    this.$router.push({ name: 'LicenseList' });
    this.$toast.success('许可证注册成功！');
  } catch (error) {
    this.$toast.error('注册许可证失败！');
    console.error('错误详情:', error); // 打印错误方便排查
  }
}

2. 修复数字字段类型问题 #

qtdeUsuariosLimitados和qtdeUsuariosIlimitados绑定的是v-text-field（type="number"），但v-model初始值为空字符串，提交时会保持字符串类型，大概率导致后端数据校验失败。通过Number()转换为数字即可解决。

3. 额外排查建议 #

• 查看浏览器控制台的具体错误信息，确认是前端字段访问错误还是后端接口参数校验失败
• 确认getClients返回的clients数组中每个对象都包含Nome、Id等必填字段
• 验证dataValidade的日期格式是否符合后端要求（如ISO 8601格式）

内容的提问来源于stack exchange，提问作者Julio Cezar Jandt