I am trying to implement v-autocomplete, which is basically a searchable select, but I’m not able to pass the customer names data. In the browser console, it shows that the data is invalid. I feel like it’s something simple, but I’ve been stuck on this for a week now.
Here is my code:
`<template>
<v-container class="d-flex align-center justify-center">
<v-form @submit.prevent="createLicense" ref="form">
<!-- Select para Cliente -->
<v-autocomplete
v-model="selectedClient"
:items="clients"
item-text="Nome"
item-value="Id"
label="Selecione o Cliente"
:loading="loadingClients"
no-data-text="Nenhum cliente encontrado"
outlined
dense
></v-autocomplete>
<!-- Select para Sistema -->
<v-autocomplete
v-model="selectedSystem"
:items="systems"
item-text="Nome"
item-value="Id"
label="Selecione o Sistema"
:loading="loadingSystems"
no-data-text="Nenhum sistema encontrado"
outlined
dense
></v-autocomplete>
<!-- Campo de data de validade -->
<v-text-field
v-model="dataValidade"
label="Data de Validade"
type="date"
:rules="[v => !!v || 'Data é obrigatória']"
required
outlined
dense
></v-text-field>
<!-- Campo para quantidade de usuários limitados -->
<v-text-field
v-model="qtdeUsuariosLimitados"
label="Quantidade de Usuários Limitados"
type="number"
:rules="[v => v >= 0 || 'Deve ser positivo']"
required
outlined
dense
></v-text-field>
<!-- Campo para quantidade de usuários ilimitados -->
<v-text-field
v-model="qtdeUsuariosIlimitados"
label="Quantidade de Usuários Ilimitados"
type="number"
:rules="[v => v >= 0 || 'Deve ser positivo']"
required
outlined
dense
></v-text-field>
<!-- Botão de submissão -->
<v-btn type="submit" color="primary" class="mt-4" large>Cadastrar Licença</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); // Remove o campo desnecessário
} catch (error) {
this.$toast.error('Erro ao buscar clientes');
} finally {
this.loadingClients = false;
}
},
async getSystems() {
this.loadingSystems = true;
try {
const response = await SystemService.getAllSystems();
this.systems = response.value;
} catch (error) {
this.$toast.error('Erro ao buscar sistemas');
} finally {
this.loadingSystems = false;
}
},
async createLicense() {
if (!this.$refs.form.validate()) {
return;
}
if (!this.selectedClient || !this.selectedSystem) {
this.$toast.error('Selecione um cliente e um sistema.');
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('Licença criada com sucesso!');
} catch (error) {
this.$toast.error('Erro ao criar licença!');
}
}
},
created() {
this.getClients();
this.getSystems();
}
};
</script>
<style scoped></style>`
And this is what the request returns: Request for sistemas:
`{
"value": [
{
"$id": 1,
"Id": 8,
"Nome": "Sistema1"
},
{
"$id": 2,
"Id": 9,
"Nome": "Sistema2"
},
{
"$id": 3,
"Id": 10,
"Nome": "sistema3"
}
]
}`
Request for clientes:
`{
"value": [
{
"$id": 1,
"Id": 2,
"Chave": "042176ec-7a2c-499e-881a-496a2c14fa64",
"Nome": "cliente",
"Email": "[email protected]",
"Telefone": "99999999"
},
{
"$id": 2,
"Id": 3,
"Chave": "ce8fc289-1e68-48e3-9468-4ec1d02ab205",
"Nome": "cliente2",
"Email": "[email protected]",
"Telefone": "99999999"
},
{
"$id": 3,
"Id": 4,
"Chave": "5d48b749-f724-4479-ad69-e1d408fa677c",
"Nome": "Cliente3",
"Email": "[email protected]",
"Telefone": "999999999"
},
{
"$id": 4,
"Id": 5,
"Chave": "0d595f88-a350-48dd-a014-d5826459b4f0",
"Nome": "Cliente4",
"Email": "[email protected]",
"Telefone": "999999999"
}
]
}`
