How to dispatch a Vue computed property

Question

I´m trying to dispatch an object which is created in a computed. I can´t get it to work as I´m fairly new to vue.js

I want to dispatch the object "updateObject" to the vuex-store. Tried with setters but didn´t work. I think if I can set the "varia" object to the same object like "updateObject" then I could maybe dispatch it? Hope somebody can help me.

Here is my code:

<template>
  <div class="detail">
     <b-row align-v="center"><b-button variant="success" @click="submit()">submit</b-button></b-row>
     // some more code...
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      subID: '',
      res: '',
      showAlert: true,
      varia: null
    }
  },
  computed: {
    ...mapState([
      'FA',
      'Main',
      'Sub',
      'layouttype'
    ]),
    getVariable: function (Sub, layouttype) {
      const subID = this.layouttype.sub_id
      var filterObj = this.Sub.filter(function (e) {
        return e.sub_id === subID
      })
      console.log(filterObj)
      return filterObj
    },
    updateObject: {
      // getterfunction

      get: function () {
        var len = this.getVariable.length
        var res = []
        for (var i = 0; i < len; i++) {
          if (i in this.getVariable) {
            var val = this.getVariable[i].variable
            res.push(val)
          }
        }
        console.log(res)
        var ergebnis = {}

        res.forEach(key => {
          if (this.FA[key]) {
            ergebnis[key] = this.FA[key]
          }
        })

        return ergebnis
      },
      // setterfunction
      set: function (value) {
        this.varia = value
      }
    }
  },
  methods: {
    submit () {
      this.$store.dispatch('sendData', this.ergebnis)
    }
  }
}
</script>

It tell´s me "this.ergebnis" is undefined

Answer 1

You can try it declaring "ergebnis" as global variable under data as

export default {
  data () {
    return {
      subID: '',
      res: '',
      showAlert: true,
      varia: null,
      ergebnis : {}
    }
  },
  computed: {
    ...mapState([
      'FA',
      'Main',
      'Sub',
      'layouttype'
    ]),
    getVariable: function (Sub, layouttype) {
      const subID = this.layouttype.sub_id
      var filterObj = this.Sub.filter(function (e) {
        return e.sub_id === subID
      })
      console.log(filterObj)
      return filterObj
    },
    updateObject: {
      // getterfunction
      get: function () {
        var len = this.getVariable.length
        var res = []
        for (var i = 0; i < len; i++) {
          if (i in this.getVariable) {
            var val = this.getVariable[i].variable
            res.push(val)
          }
        }
        console.log(res)

        res.forEach(key => {
          if (this.FA[key]) {
            this.ergebnis[key] = this.FA[key]
          }
        })

        return this.ergebnis
      },
      // setterfunction
      set: function (value) {
        this.varia = value
      }
    }
  },
  methods: {
    submit () {
      this.$store.dispatch('sendData', this.ergebnis)
    }
  }
}

Now ergebnis is accessible