CODEWITHSUNDEEP
javascriptvue.jssortingvuejs2vuex
mxignas
mxignas

Reputation: 37

Vue & Vuex - not sorting

I am using Vuex for storing my Lessons array which has objects of lessons. Everything is displayed as I want to and working perfectly. Now I need to do sorting. I wrote this code:

sortSubj() {
  this.$store.state.Lessons.Title.sort(function (a, b) {
    let titleA = a.Title.toUpperCase()
    let titleB = b.Title.toUpperCase()
     if (titleA < titleB) {
       return -1
     }
     if (titleA > titleB) {
       return 1
     }
  })
},

Im expecting this to sort my array based on the Title when pressing the button.

<label class="btn btn-secondary">
          <input type="radio" name="options" id="Subject" autocomplete="off" checked @click="sortSubj"> Subject
        </label>

But unfortunately nothing happens. Im adding a picture how code looks for displaying lessons with v-for cycle. Code for displaying lessons Whats wrong? why is it doing nothing? I get no errors as well. Does it has to be in the same cycle or what? Im really stuck with this, this is my first time using Vuex.

Upvotes: 0

Views: 71

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could not mutate the state like you did, try to commit a mutation or dispatch an action to sort the state in your store :

this.$store.commit('SORT_LESSONS_BY_TITLE')

store :

const store = new Vuex.Store({
  state: {
    Lessons:{[]}
  },
  mutations: {
    SORT_LESSONS_BY_TITLE(state) {
      state.Lessons.sort(function (a, b) {
    let titleA = a.Title.toUpperCase()
    let titleB = b.Title.toUpperCase()
     if (titleA < titleB) {
       return -1
     }
     if (titleA > titleB) {
       return 1
     }
  })
    }
  }
})

Upvotes: 1

Related Questions