use 'this' keyword in object inside method in Vuejs

Question

In a Vue component, I have a method like as below

methods: {
   submitMethod() {
     let objA = {
       id: this.id,
       this.anObject
     }
   }
 }

It gives, Syntax Error: this is a reserved word.

how to use the object, which is defined in somewhere like data() or computed, in the object of the method in Vue.js?

One workaround is that, this.anObject can be assigned to local variable and use that variable inside objA as below

submitMethod() {
    let anObject = this.anObject
    let objA = {
        id: this.id,
        anObject
     }
}

But, is there a way to use this.anObject directly inside objA?

Ben · Accepted Answer · 2017-10-24 17:44:39Z

1

If you can use the object restSpread operator, you can use it:

methods: {
   submitMethod() {
     let objA = {
       id: this.id,
       ...this.anObject
     }
   }
 }

Otherwise, you can use Object.assign:

methods: {
   submitMethod() {
     let objA = Object.assign(this.anObject, {
       id: this.id,
     })
   }
 }

answered Oct 24, 2017 at 17:44

Ben

3,0803 gold badges24 silver badges26 bronze badges

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

Comments

FluffyNights · Accepted Answer · 2017-10-24 17:44:01Z

0

thats because your JSON is invalid. it should be like

let objA = {
    id: this.id,
    anObject: this.anObject
}

answered Oct 24, 2017 at 17:44

FluffyNights

2923 silver badges6 bronze badges

Maulik Kakadiya · Accepted Answer · 2018-11-27 08:08:42Z

0

We can use this keyword with the help of copy this keyword as a local variable.

methods: {
  submitMethod() {
    let _this = this;
    let objA = Object.assign(this.anObject, {
       id: _this.id,
    })
  }
}

answered Nov 27, 2018 at 8:08

Maulik Kakadiya

1,6951 gold badge25 silver badges34 bronze badges