Implementing a Multiple Filter in Vue, Experience

Here I wanted to show you an implementation that I consider interesting which is the filter I dont know about you but at least when you talk to me about filters it is something that I would take which is an extremely simple operation In my courses I have shown a little bit how to make filters but usually it is on the server side that is to say in the end if we were to pass all this to the server what we would do is something like the following There is another way to do it a little more as who says more in the Laravel style Right now I dont remember which one it is thats why I havent implemented it Which is using a function I dont know if it was when A question like that I have to find out which is a kind of when but if it doesnt exist the parameter is not defined Then it is not defined but you can also do it like this Conditional type This is as who says a simulation it would be the one I have here It seems to me to be the free development one Here sorry the filter that I have here the management part that I can search for I can filter by category these are the publications language is posted etc and so on This is the development application here locally So what do I do here I ask if the type is defined If the post is defined if the language is defined and Im simply composing the query that we are Armando here which notice goes directly to the Books section that is the pagination which is what I have here At the end its the last operation that I do This is a way of doing it I always do it this way its really very convenient and at the end its a filter Whats the problem with the other filter

$posts = Post::orderBy($this->sortColumn, $this->sortDirection);

if ($this->type) {
    $posts->where('type', $this->type);
}

if ($this->posted) {
    $posts->where('posted', $this->posted);
}


if ($this->category_id) {
    $posts->where('category_id', $this->category_id);

}
$posts = $posts->paginate(20);

I have here I dont know if you know but this screen is in Vue

https://academy.desarrollolibre.net/libros

That is it is made in Vue and since in the end I have all the Data here for me it doesnt make sense to make a request again to the server because again here I already have all the Data so it can be a local filter since in the end if I apply the filter it will never have more Data than I originally have I think that is well understood If I have 20 books then what do I paint here by default All the available material that I have by default from the moment I apply the filters is from the Data that we already have which is my total Therefore the easiest way would be to make another request to the server in which based on the parameters that I am passing I begin to apply the filters as I showed you here in Laravel But curiously this is one of the developments that when we change a little what is the layer how we are going to handle it the implementation changes a lot since the client part in my opinion at least as I have been able to solve it is a little more complicated than it would seem at first glance and it is a little because of what I commented talking to you about all this So how the hell would we do it on the client side again this is an application in View and here the reactivity of View plays a little trick on us in my opinion because it is precisely because of the way in which we are going to manipulate the data since here what we do on the server is good If it does not meet the condition It simply does not come but here Yes we already have it then if we remove that Data from the book and then for example suppose that the person is looking here for the books to be free Ah perfect they will appear such and such and such Well now he wants to see them for payment But obviously when I put free here he already discarded the paid books therefore if we remove it from array Then we no longer have it and when we click on payment here nothing would appear I think that is understood quite well and the same with the technology part well here I have an error right now I check this I have not uploaded it yet Here I have it even the price and language part Well This is in courses what can you see here So whats the problem

A simple filter

How to apply this filter Here we also have something interesting if it is a simple filter before I dont know if you remember or if you checked it but for example I had the filter for the courses and it was only one if it was free or not that is to say it was a chat it was a filter basically a field that we have to check therefore it was extremely simple here I show you

<book-item v-for="c in onlyBooksFree ? books.filter((c) => c.price == '0.00') : books" :key="c.id"
 :book="c"></book-item>

Complex filter

Whats good about the copy that I made from the course we can expand here the filter function that is from javascript we can do this is an array obviously the ra of books that I am printing here and here I consulted Well here was the course thats why the c remained not the B as I told you I copied this it asked for the price if it was equal or equal to zero then it means that it was a free resource and therefore it was the one that was and if not it printed all the books here Note that apart from the filter here I have a short conditional in which based on this property that was again updated by a field that was a chat if well this is a radio before it was a chat the chat was pressed then it was active and I wanted to see the free courses therefore this was activated this was true and the following filter was applied and if it is activated it means that I want to see all of them which is the one that is shown by default and it is that simple but the problem is when we add two filters three filters four filters it becomes something as simple as this it already changes the implementation a lot at least as I have been able to solve it surely here someone who knows a lot of javascript which is not my case I am mostly in the backend Although Well I also defend myself quite well with javascript we could implement a double filter here since for example here this is a condition you could ask for two conditions what is the problem This condition is when you start when you enter here it is of type that is to say this has to be met that it is free Well here it exploded as I told you this part is in development that this is met and that this condition is also met So if those conditions are met Then you can apply this but here again I am always asking for something that exists which is the price in this case and also I am only applying this conditional when this is activated So how do I do with the second with the second condition that would be the second field that would be this that is to say here we would have to ask if input is free is defined that would be for example the radius that the radius that we have here and apart from this that is optional since you can apply in many ways you can only apply that they are free or you can also apply that it is a filter only by the technology

<h5 class="mb-0 ml-3">Precio</h5>
<div>
  <input class="mr-2" id="all" type="radio" v-model="onlyBooksPayFree" value="all" />
  <label for="all" :class="{ 'font-bold': onlyBooksPayFree == 'all' }">Todos</label>
</div>
<div>
  <input class="mr-2" id="free" type="radio" v-model="onlyBooksPayFree" value="free" />
  <label for="free" :class="{ 'font-bold': onlyBooksPayFree == 'free' }">Gratis</label>
</div>
<div>
  <input class="mr-2" id="pay" type="radio" v-model="onlyBooksPayFree" value="pay" />
  <label for="pay" :class="{ 'font-bold': onlyBooksPayFree == 'pay' }">Pago</label>
</div>
</div>
data() {
  return {

    onlyBooksPayFree: "all"
  }
}

Or you can also apply a filter that is both for price and for technology then doing all this in one line seems to me that I think it is impossible at least it has not occurred to me if it occurs to you you can comment on it But and you can see the difficulty of all this and that is why I have already gone through a slightly more elaborate or much more elaborate implementation which is what I am going to show you here on screen Which obviously would already be scalable here I have a lot of functions as you can see and I also have some watches here

watch: {
 onlyBooksPayFree() {
   this.filterData()
 }
},

Since the problem we have here precisely with these is that well if we can shoot there Well here I have an error that Im going to check right now is that if we could also implement unchain for when it changes but with the watch we could also do it This is the one for Book as you can see what Im showing you here Well The one here price language this would be something else that I have somewhere else So what do we do here in the watch this again would be only Spanish English which would be this section and the one for well this one for language and the one for price would be this other one that we have here that would be simply in this case its not a Boolean because there its no longer a condition of true and false but without radios what you can see Im going to see if I find it up here it could be free it could be al which is all or it could be d Pay So if I want to put any other row there for example a price of 5 or something like that I could do it easily

So first I observe if we have any changes there Through the watch either for free or paid books or for the language And from here we call this function called filter Data which you can see somewhere around here if I find it here it is that the first thing it does is clean all the previous filters and it is precisely to avoid if there are already yes we are already filtering the Data then filter it again So what I do is always start from scratch to start from a completely clean list as if I were showing everything which is the default approach that we have here that is what this function called Clean filter Data does which I will find here

cleanFilterData() {
  for (let i = 0; i < this.books.length; i++) {
    this.books[i].show = true
  }
},

What do I do here again here the problem we have is that we cant delete the objects that we have I cant do a Pull to delete the objects that we have already defined here because if not as I told you if the user comes here and wants to see for free now he wants to see them for pay then when I put them for free I already delete the paid ones so therefore it wouldnt show anything so I cant delete it I could make a copy of the raid thats another way but it would be a little more complicated than the solution that Im showing here what do I do here in the end what interests me is to determine which ones are going to be shown or which ones are not for that here I invent and I say again I invent an option called show since this is not part of the book model

books[i].show

Its the one I have here book model you can see that its not there its something local to javascript and its the advantage that we have in javascript that we can create options like this without problems so the filter indicates that everyone is shown as is you can see its a little inefficient you could say but all of this is from the client and its not a very large list so I dont have much of a problem either okay

This is what this does and from here it starts to ask what the hell do I have in the filters since again this may be defined maybe not then in the cases in which I am interested in filtering by this is when it is paid or free since when it appears it means that the filter is deactivated So if this condition is met which is when we are going to filter I start applying filters and what I do here well here it is a little bit the other way around I iterate again all the Data So in this case which is to filter by price I ask if this is greater than zero if it is greater than zero it should be shown that it is already the condition that I have here but right now I will tell you why this is deactivated and if not we hide it then and basically the language is similar to this one here I pass a default language but here I ask if the language is not the selected one Then I put it in false it is basically what I am doing And this is how you can see the solution is not so trivial or at least in my opinion then you could ask yourself why the hell do I comment this here Remember that when I I am automatically clearing the filters I clear them all that is I show all the data therefore if I am applying two filters here as I told you at the beginning it means that both this condition and this other condition must be met therefore it is a then if I here can have for example a book that is free but is not in Spanish therefore if I put it here that it is
free

  filterData() {
   this.cleanFilterData()
   if (this.onlyBooksPayFree == 'pay') {
     this.applyFilterBookPay()
   } else if (this.onlyBooksPayFree == 'free') {
     this.applyFilterBookFree()
   }
   ***
 }
},
applyFilterBookFree() {
  for (let i = 0; i < this.books.length; i++) {
    if (this.books[i].price == 0) {
      // this.books[i].show = true
    }
    else {
      this.books[i].show = false
    }

  }
},

So here this condition would be displayed it would not be met since the book would be free but the book is paid for therefore it would be hidden here here the filter would work correctly lets go with another example that the book is paid for but it is in Spanish so if we come here the first one that is executed would be that this is the one we have here to verify if it is paid for or not so as I told you the book would be paid for therefore it would be hidden here so the next filter that is going to be executed would be this one that indicates that the language is in Spanish therefore although it is hidden I am not asking about the previous condition and it would be displayed if I left this condition enabled here which would obviously be a problem since that book has to be hidden because both conditions had to be met and that is why I start as I mentioned before by cleaning all the Data therefore all the books can be shown initially and from there on with at least one of the conditions here not being met based on the filters that we are applying and it automatically hides it regardless of the other filter that we are applying if it has already been hidden or not In other words Remember that this is also sequential according to what we have here in the filter Data section in this way we do not have to worry if that book has already been hidden by another particular filter therefore if it were in that case to avoid what I was telling you from happening the book would be paid according to the filter that I have applied here the book would be paid but the book would be in Spanish it would be shown in this filter if not This first conditional and having to still put more logic here in the corresponding filters it is simply preferable to do it in the following way which is using the show one here since in this way that is again asking if a filter was already applied previously before applying the corresponding evaluation a triumphant one would not serve us if we did not have to apply another type of condition another type of structure for example it would be a one if no filter was applied a two if some filter has already been involved and apart from that whether the book is being shown or not Then it would be much more complicated for that it would simply be done this way Well I hope that the matter has become more or less clear at least in case you want to implement a filter As you can see on the screen you may already have some idea of how to implement it since this is a solution that occurred to me I spent a few days thinking about this and this was what occurred to me As you can see it is not as simple as it seems

Other option

There may surely be many more another way is precisely by working with an array copy an ar that has all the books and from there you remove this that is to say every time in this case in that hypothetical scenario when we apply the client filter Data here what we do is in the book we replicate all the books that we already have suppose that we have one here called book that we will not use here in the template if not it would simply be to have the copy of all the books When we do the filter here this one of book we would fill it with everything we have in the c in the plural And from there every time we apply a filter if it does not meet the condition we simply remove that object that does not meet the condition therefore here when we apply another filter we do not have to worry about working on whether that book was applied to a filter it was hidden or what the hell happened to the book if it was hidden in the other filter or whatever if not it would directly no longer exist Therefore I would apply the filters again based on the filter that the function in question is applying I know its a bit confusing well you may not have understood everything in detail but well Anything there you can comment in the same way here you have more or less the code try to follow the run in case you are interested in something like this and Well there you can basically go commenting But the good thing about this scheme is that obviously it is quite scalable the bad thing is that Well it really is a bit confusing as you can see again compare this since when one sees everything on the server one says no on the server it is always the most complicated and here on the client it is always the simplest But you can see that there are many cases in which it is not like that and precisely something as silly as it can be a filter that is like this that one says no this I do it in 5 minutes well those 5 minutes for me became 3 days that it did not occur to me how to do this solution well nothing this would be practically everything that I wanted to comment on in this video eh Remember that you can comment something if you did not understand any particular step of what I was explaining or directly if you were to implement this in another way that you consider to be more efficient since the best thing for me was precisely to do this but as I tell you The problem is that when we are already applying two or more filters I cant figure out how the hell I can put it all here so it was from there that I made this monster that I showed you a few moments ago so nothing Thanks for watching and see you in another video

25-09-2024 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Implementing a Multiple Filter in Vue, Experience