Fórum Academy - Search Vuejs OnLoad usando MultSelect

Criador Jean Silva 01/09/2022

Olá professor, boa tarde!

Tudo bem?. Help-me please.

Quero usar o search ao invés do Select Option do html, facilitar a usabilidade de pesquisa do usuário, têm uma lib https://vue-multiselect.js.org/ que facilita isso, portanto não sei como fazer para passar os dados para o options.

Codigo vue option atualmente (funciona):

<select class="form-select" id="company_id" v-model="form.company_id">
                                <option value="" selected disabled hidden>
                                Selecione...
                                </option>
                                <option  v-for="company in companies" :key="company.id" v-bind:value="company.id">
                                {{ company.name }}
                                </option>

Classe aonde consta a consulta api:

const getCompanies = async () => {
        await api.get('/company')
            .catch((error) => {
                console.log("Show error Notification! " + error.response.status);
                checkAutorization(error.response.status);
                return Promise.reject(error.response.data);
            }).then((response) => {
                companies.value = response.data.data;

            })
    }

    const getCompany = async (id: string) => {
        await api.get('/company/' + id)
            .catch((error) => {
                console.log("Show error Notification! " + error.response.status);
                checkAutorization(error.response.status);
                return Promise.reject(error.response.data);
            }).then((response) => {
                company.value = response.data.data;
            })
    }

3 comentários

Criador Jean Silva 01/09/2022

Consegui retornar os dados no search, portanto o id não prenche no model.

                            <Multiselect
                                v-model="form.document_type_id"
                                placeholder="Selecione as empresas que participaram do projeto"
                                :searchable="true"
                                class="multiselect-wine"
                                label="type"
                                track-by="type"
                                :filterResults="true"
                                :minChars="2"
                                :options=" documentTypes

import useDocumentType from '@/composables/documentTypes';
import Multiselect from "@vueform/multiselect";

export default defineComponent({
    name: 'DocumentCreate',
    components: {
        Multiselect,
    },
    setup(){

        const { errors, storeDocument}                       = useDocument();
        const { documentTypes, getDocumentTypes}            = useDocumentType();
       
        const form = reactive({
           document_type_id: '',
           departament_id: '',
           document_number: '',
           serie_number: '',
           stump_number: '',
           supplier_cd: '',
           key_number: '',
           description: ''
        })        
       
        const salvarDocument = async () => {
            await storeDocument({...form});
        }

        onMounted(getDocumentTypes);
       
        return{
            form,
            errors,
            salvarDocument,
            getDocumentTypes,
            documentTypes

Manager Carlos Ferreira 01/09/2022

Olá, Jean!
Tudo bem?

Como a sua pergunta é algo muito particular, vou pedir que encaminhe ela para [email protected], porque assim posso te ajudar de forma mais direcionada.

Criador Jean Silva 01/09/2022

Obrigado Professor, eu incluir diretamente via resource mesmo.