Vuejs: Using get and set property inside computed object in vuejs displays an error

Question

Is declaring property (get() and set()) inside computed object is not allowed in vuejs?

The code works, however vscode shows tons of red color in the display, see screenshot for reference.

I'm not sure if vuejs or vscode triggers the error.

Farmer.js component

computed: {
        ...mapState("farmers", ["crud_step"]),
        normal_data(){ //this works
              return 'test';
        },
        step: { //this also works but this line causes an error display
            get() {
              return this.crud_step;
            },
            set(value) {
              return this.SET_CRUD_STEP(value);
            }
          },
      },

farmer.js store

const state = {[![enter image description here][1]][1]
  crud_step: 1,
  ...

};

const mutations = {
  SET_CRUD_STEP(state, value){
    state.crud_step = value;
  },
 ...
};

Note: eslint is disabled

Repo Link: https://github.com/juanPao/acms/blob/main/src/components/Farmers/FarmerCreate.vue

Provide a minimal reproducible example reproducing the errror. Use codesandbox.io if you need a node-like multi-file editor and only include the minimum amount of code to repro the bug. Pictures of code are useless. Only code is useful. Provide enough of it to make the problem reproducible, which you haven't, yet. — tao
– tao, Commented Dec 11, 2020 at 1:19

tao · Accepted Answer · 2020-12-11 01:48:29Z

1

Your computed doesn't look right. First off, you shouldn't return anything from the setter. It's an action. It's the getter which has to return a value.

And you want the setter to commit the mutation. So your code could look like:

computed: {
  ...mapState("farmers", ["crud_step"]),
  step: {
    get() {
      return this.crud_step;
    },
    set(value) {
      this.$store.commit('farmers/SET_CRUD_STEP', value);
    }
  }
}

..., which makes it obvious you don't actually need two local props (crud_step and step), you can simply map the store's crud_step onto a local step:

computed: {
  step: {
    get() {
      return this.$store.state.farmers.crud_step;
    },
    set(value) {
      this.$store.commit('farmers/SET_CRUD_STEP', value);
    }
  }
}

For consistency, I'd actually name the local property crud_step (which implies you have to also change it in the <template>). In the long run, sticking to consistent and clean naming patterns (whatever yours happen to be) will increase your efficiency in both coding and debugging.

Since you haven't shown all the code in your component, I guessed you don't have a method called SET_CRUD_STEP which commits the mutation. Even if you do, it's unnecessary. You can simply commit from the setter. And if you used that method somewhere else in the component, replace it with this.step = someValue (which invokes the setter - that's what a setter is: a function which gets called when you assign something to that property).

edited Dec 11, 2020 at 1:48

answered Dec 11, 2020 at 1:14

tao

91.1k18 gold badges136 silver badges174 bronze badges

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

6 Comments

jp.palubs Over a year ago

thankyou for answering, I tried your code and it also works. but still the error displays in vscode. 108 out of 108 error, the problem says 'Property 'xxx' does not exist on type 'CombinedVueInstance'... maybe my vscode setup is the one that causes the error. later i'l try to upload the code in github.

tao Over a year ago

I'm guessing you're using TypeScript. In this case you have to type the values: step: { get(): number { return /* stuff */ }, set(value: number) { /* commit stuff */ } }. Note that you need to type all your computed to make the errors go away and sometimes Vue wrongly reports the type annotation failure in the first method in your methods. That's one of the TS problems Vue 2 has and which Vue 3 will no longer have.

jp.palubs Over a year ago

I'm using regular js, heres the link to the repo: github.com/juanPao/acms/blob/main/src/components/Farmers/…

tao Over a year ago

I see why this.SET_CRUD_STEP also works in your case: you're mapping the store mutations onto your component (which creates a method with the same name as the mutation). This works but can get messy once you start using more than one module. I tend to limit the usage of mappers to avoid confusion and call the exact mutation I want from the setter, as demoed above. As for your IDE errors, unless you provide more info and/or a way to repro, I can't really help. I can only fix what I can see.

jp.palubs Over a year ago

thankyou very much, I now found the problem that causes the error. I disabled Vetur extension in vscode, and the error gone.

|

Collectives™ on Stack Overflow

Vuejs: Using get and set property inside computed object in vuejs displays an error

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related