title: TypeScript and the this keyword (SharePoint Framework and Vue)
body: <p>I'm working on a SharePoint Framework web part and using Vue.js.</p>
  
  <p>Given this snippet:</p>
  
  <pre><code>export default class MyWorkspaceTestWebPart extends BaseClientSideWebPart&lt;IMyWorkspaceTestWebPartProps&gt; {
    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)
          }
        }
      })
    }
  }
  </code></pre>
  
  <p>On that last return statement, how can I get to the <code>announcements</code> and <code>numOfAnnouncements</code> Vue data properties?</p>
  
  <p>I have tried:</p>
  
  <pre><code>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)
  </code></pre>