How can I use Class object in Vuejs?

Question

I try to create a new Object of an Class at a click on a Button and want to store this Object in the vuex state. For Example, when a button is clicked, it calls the method "newMine()":

newMine() {
        this.$store.dispatch('setNewMine',"Iron")
      }

in the Store, i have this action:

import { Mine } from './modules/mine'
...
state: {
    mines:[]
  },
  mutations: {
    setNewMine(state,ore){
      state.mines.push(new Mine(ore))
    }
  },
  actions: {
    setNewMine({commit},ore){
      commit('setNewMine',ore)
    }
  },
  getters: {
    getMines:(state) =>{
      return state.mines
    }
  }

the class "Mine" looks like this:

export default class Mine {
    constructor(id,wert){
        this.id = id
        this.wert = wert
    }
    get id(){
        return this.id
    }
      set id(id) {
        this.id = id
      }
      get wert(){
        return this.wert
      }
      set wert(wert) {
        this.id = wert
      }
  }

It should be really simple, but it still doesnt work, because i get the error message:

[Vue warn]: Error in v-on handler: "TypeError: _modules_mine__WEBPACK_IMPORTED_MODULE_3__.Mine is not a constructor"

Whats wrong here? Any help is welcomed, even if it without the store. Thank you

Estus Flask · Accepted Answer · 2020-02-26 15:09:22Z

2

import { Mine } from './modules/mine' results in Mine === undefined, so it causes is not a constructor error when instantiated with new.

export default class Mine {...} is default export. So it needs to be imported as:

import Mine from './modules/mine'

answered Feb 26, 2020 at 15:09

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Petziferum Over a year ago

tried without the brackets, but then i get this error message: "Error in v-on handler: "InternalError: too much recursion"

Estus Flask Over a year ago

It's because of id member. You're getting/setting a property that calls a getter/setter of itself, this results in recursion. In case you want to provide getter/setter pair for id (this is an antipattern in this case because it doesn't differ from regular this.id access), there should be a private property, set id(id) { this._id = id } and get id(){ return this._id }.

Collectives™ on Stack Overflow

How can I use Class object in Vuejs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related