dimanche 21 mars 2021

Vue with Ajax and v-select

Hello everebody creating a select with search filter, I am getting quite a large list of data and I am trying to implement the VueSelect search engine obviously from Vue.

Ok, I'm doing a GET query to the server in PHP (LARAVEL) and from the server I send the response like this:

$clientes = DB::connection('naviones')->table('ps_customer')->select('ps_customer.id_customer',DB::raw('CONCAT(ps_customer.firstname," ",ps_customer.lastname)as fullname'))
        ->having('fullname', 'like' ,$nombrecliente.'%')
        ->orderBy('fullname','ASC')
        ->get();


    return response()->json
    ([
       'clients' => $clientes
    ]);

In view i have the component select:

                 <div class="form-group" id="vueSelect">
                         {!! Form::label('nombre_cliente','Nombre del cliente') !!}
                            <v-select label="name" :filterable="false" :options="options" 
                              @search="onSearch">
                                <template slot="no-options">
                                    Buscar...
                                </template>
                                <template slot="option" slot-scope="option">
                                    <div class="d-center">

                                        @
                                    </div>
                                </template>
                                <template slot="selected-option" slot-scope="option">
                                    <div class="selected d-center">
                                        <img :src='option.owner.avatar_url'/>
                                        @
                                    </div>
                                </template>
                            </v-select>
                        </div>

And and Vue i have this:

new Vue({
el: "#vueSelect",
data: {
    options: []
},
methods: {
    onSearch(search, loading) {
        if(search.length) {
            loading(true);
            this.search(loading, search, this);
        }
    },
    search: _.debounce((loading, search, vm) => {
        fetch(
            `../buscarclientes/${escape(search)}`
        ).then(res => {
            res.json().then(json => (vm.options = json.items));
            console.log(vm);
            loading(false);

        });
    }, 350)
}

});

What is my mistake?, I know that I am not accessing the "clients" object in my array but I don't know how it is done in Vue.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire