0
respostas

[Projeto] [VUEJS] - Retornar valor do primeiro input para pre-selecionar dados no segundo input

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.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeMeu 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>