Vue how to sort by array length?

1

I have a user profile card and I’d like to sort them according to how many alerts they each have.
Alerts are shown by length:

<div>{{item.alerts.length}}</div>

which comes from an array in parent component:

 arrays: [
        {name: 'Dan',
         alerts: [{time: '2:00', alert: 'vol',},
                 {time: '7:00', alert: 'temp'}]
         },
         {name: 'Shawna' ,
          alerts: [{time: '1:00', alert: 'temp'}]
          }
         ]

In the parent component I’d like to sort:

<div>
<div >Sort By:
                
<select name="sort" class="sort" >
    <option >Name</option>
    <option value="alert">Alert</option>
 </select>
</div>

 <users :arrays=arrays ></users>
</div>

Thanks so much!
2

First of all, “arrays” is a terrible name for a variable, and you should call that something else. “users” might be more appropriate. Also, “users” is a poor name for a component. A component name should ideally be singular (not plural) and should start with an uppercase letter. So it’d be better to call it “User”.

I’d recommend using a v-for approach and showing the array in whatever order it happens to be in at the moment. Then you can add a method that gets called on click (on whatever element of your choosing) which will sort the array. You’re going to have to write that method manually since you have a complex object.

3

Sorry about that and thanks for the suggestions.

I’m currently using v-for in child component:

<div v-for="(item, index) in arrays" :key="item.id" >

which yes does show in current order.

How would I go about adding the method for alerts.length? And how I can I add it to select options(since I can’t add @click directly to <options>?

Thank you!

4

No offense intended at all, but knowing how to use Google will help reveal the answers to those questions, you just have to learn/know what to put into the search field. I’ll give you these hints:

5

Thanks for your help!
I got it working by adding:

else if (this.filter === 'alert')
  this.arrays.sort((a, b) => {return b.alert.length < a.alert.length ? -1 : 1})

by following this Sort function