Displaying filtered/sorted list with multiple conditions

#1

I have an interesting edge case to List Rendering that I am having trouble getting to render. I have a list of items to render sorted, based on a dropdown menu click with 5 options. I know the functions work from testing, but I’m having trouble getting them to render properly based on the switch cases. I follow what the docs are saying about Displaying Filtered/Sorted Results, but this has only one case. My array is on Vuex state, and I need to dynamically change the order based on the user-clicked dropdown.

  <div class="vidArray-container">
    Sort by:
    <form @submit.prevent="handleFilter">
      <select style="font-size: 18px;" v-model="filter">
        <option value="title">Title</option>
        <option value="date recent">Recent</option>
        <option value="date old">Old</option>
        <option value="length short">Short Video Length</option>
        <option value="length long">Long Video Length</option>
      </select>
    </form>
    <h3 class="search-result">Favorites:</h3>
    <div v-for="video in handleFilter">
      <fav-card
        style="width: 400px;"
        :video="video"
        :videoId="video.id.videoId"
        :thumbnail="video.snippet.thumbnails.medium.url"
        :key="video.id.videoId"
      />
    </div>
  </div>
</template>

<script>
import vuex from 'vuex'
import favCard from '~/components/favCard'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      filter: 'date recent'
    }
  },
  components: {
    favCard
  },
  watch: {
    filter: function(newVal, oldVal) {
      this.handleFilter(newVal)
    }
  },
  methods: {
    handleFilter() {
      switch (this.filter) {
        case 'title':
          return 'sortTitle'
          break
        case 'date recent':
          return 'sortDateNew'
          break
        case 'date old':
          return 'sortDateOld'
          break
        case 'length short':
          return 'sortLengthShort'
          break
        case 'length long':
          return 'sortLengthLong'
          break
        default:
          break
      }
    }
  },
  computed: {
    ...mapGetters([
      'sortTitle',
      'sortDateOld',
      'sortLengthShort',
      'sortLengthLong',
      'sortDateNew'
    ])
  }
}
</script>```
#2

This works, combined with my getters. I filtered and set them on Vuex, then switch case to pull whichever ordered list I need.

  <div class="vidArray-container">
    Filter by:
    <form @submit.prevent="handleFilter">
      <!-- #inline style -->
      <select style="font-size: 18px;" v-model="filter">
        <option value="title">Title</option>
        <option value="date">Recent</option>
        <option value="length short">Short Video Length</option>
        <option value="length long">Long Video Length</option>
      </select>
    </form>
    <h3 class="search-result">Favorites:</h3>

    <!-- #list and keys along with #inline styling -->

    <div v-for="video in favArray" :key="video.id.videoId">
      <fav-card
        style="width: 400px;"
        :video="video"
        :videoId="video.id.videoId"
        :thumbnail="video.snippet.thumbnails.medium.url"
      />
    </div>
  </div>
</template>

<script>
import vuex from 'vuex'
import favCard from '~/components/favCard'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      filter: 'date',
      favArray: []
    }
  },
  components: {
    favCard
  },
  computed: {
    ...mapGetters(['filterFavs', 'getFavArray'])
  },
  methods: {
    handleFilter: function(val) {
      switch (val) {
        case 'title':
          this.$store.commit('ORDER_BY_TITLE')
          break
        case 'date':
          this.$store.commit('ORDER_BY_DATE')
          break
        case 'length short':
          this.$store.commit('ORDER_LENGTH_SHORT')
          break
        case 'length long':
          this.$store.commit('ORDER_LENGTH_LONG')
          break
        default:
          break
      }
    }
  },
  created() {
    ;(this.favArray = this.$store.getters.getFavArray),
      this.$bus.$on('favFavChange', () => {
        return (this.favArray = this.$store.getters.filterFavs)
      }),
      this.$bus.$on('favMainFavChange', () => {
        return (this.favArray = this.$store.getters.filterFavs)
      }),
      this.$bus.$on('filterFavs', () => {
        this.favArray = this.$store.getters.filterFavs
      })
  },
  watch: {
    // #async/await function -- promise
    filter: async function(newVal, oldVal) {
      await this.handleFilter(newVal)
      this.favArray = this.$store.getters.getFavArray
    }
  }
}
</script>
#3

I’m new to Vue and somewhat in same situation. I’ve got an object of ‘assets’ and their respective details in vuex, and I am using a v-for in one of my components to show the assets. I need to sort them by either asset name or its project name.
Do you reckon I should perform mutation in vuex and the pull in the sorted data or do as you did?