I need help combining the text search and sorting functions.

[danbraun]

Hi! Just starting into my journey with vue.

I have added 2 computed functions that work separately, but I want to them to work together! I took these both from Codepens, but I understand them.

I have in my component a few sort buttons. They work by changing a data value "sortOrder" which triggers a re-looping through the results of the computed function:

// the loop calling sort, which runs orderListOptions:
<li
  v-for="{ name, image, id } in sort(sortOrder)"
  :key="id"
>
...
methods: {
    sort: function (sortOrder) {
      return this.orderedListOptions[sortOrder]()
    }
...
computed: {
    orderedListOptions: function () {
      return {
        Popularity: () => {
          return this.Birds
        },
        'A-Z': () => {
          return this.Birds.slice().sort(this.sortTitle)
        },
        'Z-A': () => {
          return this.Birds.slice().sort(this.sortTitle).reverse()
        }
      }
    },
...

Here's the other thing I found which works great for a text search, if I just swap out my loop to use this function instead:

...
<label>
      Search title:
      <input type="text" v-model="search" placeholder="Search title.."/>
      </label>
....
// same loop as above, only I'm using filteredList
<li
  v-for="{ name, image, id } in filteredList"
  :key="id"
>
...
computed: {
    filteredList() {
      return this.Birds.filter(bird => {
        return bird.name.toLowerCase().includes(this.search.toLowerCase())
      })
    }
...

These work both great, but where do I start to combine them, so that I can have the user both text search and sort on the same "Birds" list?

[LinusBorg]

Generally, you can reference one computed property inside of another via this.

However, you computed property for sorting doesn't make sense, really. All it does it return an object with 3 functions. It doesn't compute anything, that would only happen when you call these functions later, which defeats the purpose of a computed property.

You could just as well just put these 3 functions into methods.

But what you should instead do is this:

<template>
  <ol>
    <li
      v-for="{ name, image, id } in orderList"
      :key="id"
    >
  </ol>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data: () => ({
    // ...
  }),
  computed: {
    filteredList() {
      return this.Birds.filter(bird => {
        return bird.name.toLowerCase().includes(this.search.toLowerCase())
      })
    },
    orderedList() {
      switch(this.sortOrder) {
        'Popularity': return this.filteredList;
        'A-Z': return this.filteredList.slice().sort(this.sortTitle);
        'Z-A': return this.filteeredList.slice().sort(this.sortTitle).reverse();
      }
    }
});
</script>

You could also switch it around and first sort, then filter the sorted data, if filtering happens more often than sorting.

[danbraun]

@LinusBorg thanks for your help. I got both functions working now with your help.

Regarding using "computed" in this case, my understanding is that this keep these functions results cached so they are not computed every redraw if not needed.