How to get value from items that sorted?

[plugza]

[Not that real issue] I don't know how to get value from items that sorted and I didn't see any methods to do that.

Example. I want to change color of sorted items when clicking sort button. How to get sort values when clicking it?

[David-Desmaisons]

Hello @plugza , do you mean the list of the sorted elements?

This is not provided by vue.istotope but you can compute it by using filter method using the same filter function.

[plugza]

Can you give me some examples? I've just started to learn vuejs.

I give my example about what I want to do.

data is like this

data {
   list {
         name: 'abc',
         cat1: 1,
         cat2: 3,
         cat3: 5,
         cat4: 2
         },
         {
         name: 'def',
         cat1: 3,
         cat2: 4,
         cat3: 1,
         cat4: 4
         }
    }
}

When I activate sort function I sort these cat1, cat2, cat3, cat4. Between that I want to get this the value of this category into the class itself. So I can change its color.

Kinda like this. Click sort > get a category name > get its category value (ex. cat1 = 1), bring it to class.

<item :class="'item-color-' + CATVALUEISHERE"></item>

Any help would be much appreciated. before i get too much desperate and go back to my jQuery cave. lol

[David-Desmaisons]

@plugza, I don´t understand fully your scenario, it looks like you want to apply class to your item but this is not related to isotope component. Could you give a more comprehensive scenario so I can try to help you.

[plugza]

The full scenario is... I have a list of names that have various ranks by categories as you see above. When I want to sort I want to separate the rank them by color.

1 = green 2 = yellow 3 = red and so on...

From my understanding. I need to do something at the time I use sort method in vue.isotope. So I have to get the value from the category, keep it in some variables and use it as a class to change color by css class.

<item :class="item-color-' + VALUEISHERE"></item>

Example. I click "category1" button. it will sort every name in category1 by values. aaa's category1 is 1 and bbb's category1 is 3

[inside isotope]
<item :class="item-color-1">{{aaa.name}}</item>
<item :class="item-color-3">{{bbb.name}}</item>

*In fact I use v-for to list every names. I just write this to explain.

From above. it means aaa will get 'green' color and bbb will get red color. And when I use sort methods to sort with another category. It should be change by the value of other categories.

Things is I don't know how to get value from your sort methods. I use this.$data but got undefined. That's the thing I just want to ask you. How can I get these values? Or give me some example to change color from the inside of vue or anything as a best practice to do.

Can help me on this?

[David-Desmaisons]

Our problem is not linked to vue.isotope but to dynamic class in vue.

Did you try something like:

where sortedField will be the filed you use to filter the data.