CODEWITHSUNDEEP
node.jsvue.jsecmascript-6
MarkK
MarkK

Reputation: 1088

Vuejs Cannot destructure property

I have an auth.js with a function signUp():

  async signUp(_, { username, password, firstName, lastName }) {
    const data = await Auth.signUp({
      username,
      password,
      attributes: {
        given_name: firstName,
        family_name: lastName,
      },
    });
    console.log(data);
  },
};

In Registration.vue methods:, I'm trying to pass username and password like this:

   async submitReg() {
      AWSAuth.actions.signUp({
          username: this.form.email,
          password: this.form.password
        });

However, I get this error:

Uncaught (in promise) TypeError: Cannot destructure property 'username' of 'undefined' as it is undefined. at Object.signUp (auth.js?0a5a:103) at VueComponent.submitReg (VM20046 Register.vue:32)

Why? I don't understand why username is undefined when "this.form.email" has a value "string.

Upvotes: 3

Views: 14160

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Because you're destructing the second parameter which is undefined, remove the _ which is defined as first parameter:

async signUp({ username, password, firstName, lastName }) {

if signUp is an action it should be called via dispatch method :

this.$store.dispatch("signUp",{
          username: this.form.email,
          password: this.form.password
        })

then the first param will the context callback and the second is your payload :

async signUp({commit}, { username, password, firstName, lastName }) {

...

Upvotes: 1

Related Questions