vuejs sort by year and find by tag in array

Question

Building a project in VueJS with data coming from an api (using axios): I have a list of projects with props (year, location, etc) and tags (house, park, etc). I have made this filter to toggle the sort by prop:

sortby(data) {
 // data = {prop: "year", tag: "house"}
 //
 if (data.prop === "year") {
   this.projects.sort((a, b) => (a[data.prop] < b[data.prop] ? 1 : -1));
 } else {
   this.projects.sort((a, b) => (a[data.prop] < b[data.prop] ? -1 : 1));
 }
},

but after the sort I would like to only show the objects that have tag === "house".

any ideas? thanks!

.filter(({tag}) => tag === 'house')?

Yevhen Horbunkov
– Yevhen Horbunkov

2020-05-26 11:25:37 +00:00
Commented May 26, 2020 at 11:25 — Yevhen Horbunkov
– Yevhen Horbunkov, Commented May 26, 2020 at 11:25

Owl · Accepted Answer · 2020-05-26 11:31:03Z

1

You can use javascript array filter

const filteredProjects = projects.filter(({tag}) => tag === "house");

or put it on the computed properties

data: () => ({
  projects: [
    {prop: "year", tag: "house"},
    ...
  ]
}),
computed: {
    filteredProjects: function () {
      return this.projects.filter(({tag}) => tag === "house");
    }
  }

and then use it in your template

<template>
  <div>
    {{ filteredProjects }}
  </div>
</template>

edited May 26, 2020 at 11:31

answered May 26, 2020 at 11:28

Owl

6,9033 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilijanovic Over a year ago

projects.filter( ({tag}) => tag === "house") thats shorter syntax

bboy Over a year ago

thanks for the help! i have some errors, but i guess im doing something wrong. i'll prepare a jsfiddle

Collectives™ on Stack Overflow

vuejs sort by year and find by tag in array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related