TypeScript und das this-Schlüsselwort (SharePoint Framework und Vue)

Question

Ich arbeite an einem SharePoint Framework-Webpart und verwende Vue.js.

dieses Snippet Gegeben:

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) 
     } 
     } 
    }) 
    } 
} 

An dieser letzten return-Anweisung, wie kann ich die announcements und numOfAnnouncements Vue Dateneigenschaften erhalten?

Ich habe versucht:

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) 

Answer 1

Ihr Problem ist, dass this innerhalb der announcementsTrimmed Funktion streng nicht auf Ihre Klasse beziehen, sondern auf den Kontext die Funktion aufgerufen wird.

Die Lösung ist es zu einem Pfeil Funktion umzuwandeln, die den Kontext für this hält:

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

oder kürzer:

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

Um mehr zu erfahren über, dass Sie das zum Beispiel lesen konnten MDN documentation.