Vue with Ajax and v-select

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 in 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.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2QikRlW
via IFTTT