Predefine searchFor

[warrence]

Hi, is it possible that i predefine the search filter for the first time i call the vuetable component? i try to use :search-for="searchvalue" but nothing happen. Meaning i would like the vuetable load with the filtering result.

[ratiw]

@warrence Hmm, I haven't thought about that, but a very valid use case. Anyway, it could be done but let me check the code and get back to you on this later.

[warrence]

Thanks for your time.

[ratiw]

@warrence Just notice that you're using search-for which does not exist for vuetable, so, there's no way that's going to work. Instead, you should use append-params prop and the predefined filter (search) is already working.

So, if your API backend already supports filter, you could do like this

  <vuetable
    fields="..."
    api-url="..."
    :append-params="['filter=xyz']"
  >

[warrence]

@ratiw i tried your way but is not working, however i get it working in my own way but I'm not sure is this a right way, but it works at least for now.

i grab my url parameter as below in js:

var urlParams = new URLSearchParams(window.location.search)
var filter = urlParams.get('filter')
if(filter == null){
    filter = ''
}

i initiate the searchFor as below:

data: {
            searchFor: filter,

and then i add in the ready:

ready(){
        if(filter != ''){
            this.setFilter()
        }
    },

I would hope there is a better way for this

[ratiw]

@warrence That would work too. (I assume you're using the code in the examples folder as a basis) I think you should be able to move the first part of your code (grabbing the filter from the url) inside the ready() block as well.

Just curious, why do you need to grab the filter from the browser url? You do not know this in advance?

[warrence]

@ratiw i have a redirection from another page to this vuetable page, and i was redirect with a filter, i wan the vuetable page open with a filtered result initially. Lets take a look at a very simple example which is easier to explain than my actual scenario.

• Product Item Listing Page Use vuetable for listing all product ordered by recently added, with search. One of the searchable column is Product Category

Then i might have page that explain about a category of a products and i wan to have a link to bring user to Product Item Listing Page like /products-listing?filter=category_name, to show user what kind of product i have under this category.