Amigos, bom dia! Poderiam me ajudar por favor?. Eu tenho dois inputs em meu form, eu gostaria de retornar no segundo input apenas os dados conforme o usuário escolher no primeiro input, um exemplo na image, eu consigo retornar os dados conforme o usuário digita, portanto hoje está retornando todos os dados da minha consulta no segundo forms, seria parecido algo com o autopreencher do cep, eu acho, ainda não precisei fazer algo parecido, agradeço a ajuda dos mesmos.
Meu codigo do primeiro input:
const fetchRequestDepartment = async () => {
const data = await api
.get("/requestDepartment")
.catch((error) => {
console.log("Show error notification! " + error.response.status);
return Promise.reject(error.response.data);
})
.then((response) => {
return response.data.data;
});
return data.map((item) => {
return {
value: item.id,
label: `${item.id} - ${item.description}`
};
});
};
Codigo do segundo input:
const fetchRequestType = async () => {
const data = await api
.get("/requestType")
.catch((error) => {
console.log("Show error notification! " + error.response.status);
return Promise.reject(error.response.data);
})
.then((response) => {
return response.data.data;
});
return data.map((item) => {
return {
value: item.id,
label: `${item.id} - ${item.description} - ${item.request_sponsor_id} - ${item.dept_id}`
};
});
};
Na minha view eu uso o multiselect para retornar os dados:
<div class="row mb-15px">
<label class="form-label col-form-label col-md-3">Departamento de Destino</label>
<div class="col-md-12">
<Multiselect
v-model="form.to_dept_id"
placeholder="Digite o Departamento de Destino"
:filterResults="true"
:minChars="2"
:limit="2"
:clear-on-select="true"
:close-on-select="true"
:resolveOnLoad="false"
noResultsText="Departamento não Encontrado"
:delay="0"
:searchable="true"
class="multiselect-wine"
:options="
async () => {
return await fetchRequestDepartment();
}
"
>
</Multiselect>
</div>
</div>