dimanche 21 mars 2021

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.



via Chebli Mohamed

15 commentaires:

sherazabbasi a dit…

Hi, I enjoyed your wonderful site.
slot

sherazabbasi a dit…

I am always searching online for articles that can help me. There is obviously a lot to know about this. I think you made some good points in Features also. Keep working, great job!
แทงบอลเต็ง

sherazabbasi a dit…

I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work.
แทงบอลสเต็ป

sherazabbasi a dit…

Great post full of useful tips! My site is fairly new and I am also having a hard time getting my readers to leave comments. Analytics shows they are coming to the site but I have a feeling “nobody wants to be first”.
UFA365

sherazabbasi a dit…

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info
UFA365

Unknown a dit…

I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.
เว็บแทงบอลฝากถอนauto

Anonyme a dit…

hi was just seeing if you minded a comment. i like your website and the thme you picked is super. I will be back เว็บแทงบอลสเต็ปไม่มีขั้นต่ำ

sleepersmattress a dit…

Internet search engine optimization experts apply the modern analytics service, which has a positive affect a website. SEO companies are facing great competition in the SEO field. However, they introduce guaranteed SEO services to manage with the competition.
เว็บแทงบอลออโต้

sherazabbasi a dit…

I am always searching online for articles that can help me. There is obviously a lot to know about this. I think you made some good points in Features also. Keep working, great job!
UFA365

sherazabbasi a dit…

I must say, I thought this was a pretty interesting read when it comes to thisC topic. Liked the material. . .
แทงบาสเว็บไหนดี

sherazabbasi a dit…

Your post was very nicely written. I’ll be back in the future for sure!
บาคาร่าsa-gaming

jackiedavis a dit…

his is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the excellent work.
แทงบาสออนไลน์

Unknown a dit…

his is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the excellent work.
คาสิโนออนไลน์ฟรีโบนัส/

sherazabbasi a dit…

mmm.. good to be here in your article or post, whatever, I think I should also work hard for my own website like I see some good and updated working in your site.
สล็อตออนไลน์

Lea Seydoux369 a dit…

Hi I found your site by mistake when i was searching yahoo for this acne issue, I must say your site is really helpful I also love the design, its amazing!. I don’t have the time at the moment to fully read your site but I have bookmarked it and also add your RSS feeds. I will be back in a day or two. thanks for a great site. ประวัตินักกีฬา

Enregistrer un commentaire