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