TypeScript and the this keyword (SharePoint Framework and Vue)

Question

I'm working on a SharePoint Framework web part and using Vue.js.

Given this snippet:

export default class MyWorkspaceTestWebPart extends BaseClientSideWebPart<IMyWorkspaceTestWebPartProps> {
  public uol_app;

  public render(): void {
    this.domElement.innerHTML = "some markup"

    this.uol_app = new Vue({
      el: `#vueapp-${this.context.instanceId}`,
      data: {
        announcements: [],
        numOfAnnouncements: 4
      },
      computed: {
        announcementsTrimmed: function() {
          return this.uol_app.announcements.splice(0, this.uol_app.numOfAnnouncements)
        }
      }
    })
  }
}

On that last return statement, how can I get to the announcements and numOfAnnouncements Vue data properties?

I have tried:

return this.uol_app.announcements.splice(0, this.uol_app.numOfAnnouncements)

return this.uol_app.data.announcements.splice(0, this.uol_app.data.numOfAnnouncements)

return this.data.announcements.splice(0, this.data.numOfAnnouncements)

return this.announcements.splice(0, this.numOfAnnouncements)

return uol_app.announcements.splice(0, this.numOfAnnouncements)

And what problem does each of them throw? What's this referencing? — Luis Orduz
– Luis Orduz, Commented Jul 25, 2017 at 13:20

Stephan · Accepted Answer · 2017-07-27 10:49:12Z

1

Your problem is that this within the announcementsTrimmed function does not strictly refer to your class but to the context the function is called.

The solution is to convert it to an arrow function, which keeps the context for this:

announcementsTrimmed: () => {
  return this.uol_app.announcements.splice(0, this.uol_app.numOfAnnouncements)
}

or shorter:

announcementsTrimmed: () => this.uol_app.announcements.splice(0, this.uol_app.numOfAnnouncements)

To learn more about that you could read for example the MDN documentation.

answered Jul 27, 2017 at 10:49

Stephan

2,11518 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

TypeScript and the this keyword (SharePoint Framework and Vue)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related