1

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.

2 respuestas 2

1

Ya he resuelto mi problema

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)

json.items tenia que ponerle mi objeto, que en este caso se llama clientes. Quedando

json.clientes
0

Según entiendo, lo que quieres hacer es un live search de tus datos, ¿correcto?

Si esto es así, ¿qué haría yo? Sabiendo que me devuelve un array de datos y necesito filtrar por un string, usaría el método filter y lo uniría con el método includes de javascript.

Paso a dejarte un ejemplo:

new Vue({
  el: "#app",
  data: {
    characters: [],
    value: ''
  },
  mounted() {
    fetch('https://rickandmortyapi.com/api/character')
      .then(res => res.json())
      .then(res => this.characters = res.results)
      .catch(err => console.error(err))
  },
  computed: {
    search() {
      return this.characters.filter((character) => {
        return character.name.includes(this.value)
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <input v-model="value" type="text" style="margin: 2rem auton;">
  
  <div v-for="(item, key) in search" :key="key">
    <p> {{ item.id }} | {{ item.name }} | {{ item.status }}</p>
  </div>
</div>

Como te darás cuentas si coloco un nombre exacto o una porción del mismo, me muestra los resultados concordantes en cada caso, en este caso solo el name, pero puedes agregar condiciones como tantas te parezca. El ejemplo serviría si haces un select también. Colocas las opciones que quieres y luegos, al hacer un change, te devolverá lo casos concordantes. Puedes hacerlo con un watch también, pero en este caso, me parece que devolviendo tantos datos, pues es una forma de ahorrarte consultas al servidor.

P.D: Los resultados son case sensitive. Así que debes colocar mayúsculas o minúsculas. También eso se puede solucionar, pero me parece que esto sirve para darte una idea.

Ahora, si necesitas sí o sí hacer una consulta like a tu endpoint del server, supongamos que recibe un parámetro por get, entonces podrías hacer algo como esto:

new Vue({
  el: "#app",
  data: {
    data: [],
    value: ''
  },
  mounted() {
    fetch('https://rickandmortyapi.com/api/character/')
      .then(res => res.json())
      .then(res => {
        this.data = res.results
      })
      .catch(err => console.error(err))
  },
  methods: {
    search() {
      fetch(`https://rickandmortyapi.com/api/character/?name=${this.value}`)
        .then(res => res.json())
        .then(res => {
          this.data = res.results
        })
        .catch(err => console.error(err))
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="value">
  <button @click="search">Consultar</button>

  <div v-for="(d, key) in data" :key="key">
    <p>{{ d.id }} | {{ d.name }} | {{ d.status }}
  </div>
</div>

Sería más o menos el mismo caso pero en este caso busca información en la api, cada que le den click.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.