Espero me puedan echar una mano que estoy perdido aqui, les explico:
Estoy creando un select con filtro de busqueda, estoy recibiendo un lista bastante grande de datos y estoy tratando de implementar el buscador VueSelect obviamente de Vue.
Vale, estoy haciendo una consulta GET al servidor en PHP (LARAVEL) y del servidor envio la respuesta así:
$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
([
'clientes' => $clientes
]);
En la vista tengo el componente select asi:
<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">
@{{ option.fullname }}
</div>
</template>
<template slot="selected-option" slot-scope="option">
<div class="selected d-center">
<img :src='option.owner.avatar_url'/>
@{{ option.fullname }}
</div>
</template>
</v-select>
Y en Vue tengo lo siguiente:
Vue.component("v-select", VueSelect.VueSelect);
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)
}
});
La cosa es que no se como terminar de listar la informacion que esta en el objeto cliente del json en PHP que tiene los datos que me interesan listar, no consigo entender quien es quien.
Quiero lograr hacer esto con este componente porque estuve viendo que es muy bueno para filtrar grandes volumenes de datos, cabe mencionar que ya hice unas pruebas con un hibrido que estaba probando:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
url:'../buscarclientes',
type:'get',
dataType:'json',
success: function(data)
{
Vue.component('v-select', VueSelect.VueSelect);
buscador = new Vue
({
el: "#vueSelect",
data:
{
options:data.clientes,
cliente: '',
search: '',
offset: 0,
limit: 10
},
})
}
});
Este funciona bien (Hasta cierto punto) por eso queiro lograr implementar el primero que les he mostrado. Espero me puedan dar alguna pista.
Gracias.