Computed property setter creates Maximus stack exceeded

Question

I have such code:


   
     
   


new Vue({
  el: '#app',
  computed: {
    sorting: {
      get: function () {
        return this.filterInput.sorting
      },
      set: function (value) {
        // this array needs to always have only one value
        this.filterInput.sorting = [value[0]]
      }
    }
  },
  data () {
    return {
      filterData: {
        sorting: ['PRICE_ASC', 'PRICE_DESC']
      },
      filterInput: {
          sorting: []
      }
    }
  }
})

https://jsfiddle.net/pum86bsx/1/

Error seems to be in computed getter. When I comment it out it's all good. I have no idea why it's like that.

user_8397974 · Answer

You setting the value of the v-model (the value returned in the getter), which will cause the setter to fire again.. and again.. and again.. Causing your stack to overflow.

Using checkboxes

You could instead use the @change event, which should only fire when the value actually changes.

new Vue({
  el: '#app',
  data () {
   return {
     filterData: {
       sorting: ['PRICE_ASC', 'PRICE_DESC']
      },
      filterInput: {
       sorting: []
      }
    }
  },
  methods: {
   onChange(value) {
     if(value.length === 0) {
    this.filterInput.sorting = value
      } else {
       this.filterInput.sorting = [value[value.length - 1]]
      }
    }
  }
})

Using radio buttons

Alternatively you could use radio buttons, which only allows one to be selected at a time, so you don't have to handle that yourself.

new Vue({
  el: '#app',
  data () {
   return {
     filterData: {
       sorting: ['PRICE_ASC', 'PRICE_DESC']
      },
      filterInput: {
       sorting: []
      }
    }
  }
})

Computed property setter creates Maximus stack exceeded

1 Answers

Using checkboxes

Using radio buttons