[Vuejs]-A conditionned SQL query [VueJS]

by

0👍

TL;DR: Check out this link about event handling in Vue: https://v2.vuejs.org/v2/guide/events.html

Right now, your ajax request doesn’t pass selected to your php code, only search, since the data option is only {search}. I don’t know exactly what format the php needs to take in, but it is probably something along the lines of

{search: [searchValue], selected: [selectedValue]}

To actually trigger the ajax call, you need to hook up your GetList method to an element controlled by Vue. Based on the code you shared, it looks like you’re only using Vue to control the dropdown, so you could trigger a request like this:

<select v-model="selected" v-on:change="GetList()">

As it stands now, that will fire the GetList, but doesn’t make use of your dropdown. If you modify GetList to take the value of the dropdown, it will include it as well:

GetList: _.debounce(function(search = ""){
    var scope = this;
    $.ajax({
        url:"data.php?case=list",
        type:"POST",
        data:{search: scope.search, selected: scope.selected},
        success:function(res){
            scope.list = JSON.parse(res);
        },
        error:function(){
        }
    });
},500),

Note that on the data line, it is referring to this.search and this.selected. That’s how you can access the value stored in the data object. By having v-model="selected" on the dropdown in your template, it is bound to the selected property in the data object, so its value can be accessed within the method with this.selected.

Also note that the name of the method is GetList. The code you pasted is GetListe, but you try to call it on the mounted() lifecycle hook as GetList(), so I’m assuming the method declaration GetListe is a typo.

I would try hooking up your GetList method to the change event on the select element, perhaps add some console logs to better understand what’s going on, and change the value in the dropdown a few times and see what happens. I would also get rid of the debounce, just to simplify as you are trying to understand it.

GetList: function(search = "") {
    console.log("GetList()");
    console.log("search: " + this.search);
    console.log("selected: " + this.selected);
    var scope = this;
    $.ajax({
        url:"data.php?case=list",
        type:"POST",
        data:{search: scope.search, selected: scope.selected},
        success:function(res){
            scope.list = JSON.parse(res);
        },
        error:function(){
        }
    });
},

That should get you going in the right direction.

The next step would be to bring your search bar into the vue template as well, bind your search data property as a v-model on the search bar, and trigger the GetList event when the search value is changed as well. Something like this:

<input v-model="search" v-on:change="GetList()">

Again, have console logs in the GetList method, play around with it a bit to understand what its doing.

Leave a comment