TypeScript和這個關鍵字（SharePoint Framework和Vue）

Question

我正在使用Vue.js在SharePoint框架Web部件上工作。

鑑於此片段：

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

關於最後return語句，我怎樣才能到announcements和numOfAnnouncements Vue的數據屬性？

我曾嘗試：

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

你的問題是announcementsTrimmed函數內this不嚴格參照您的類，但該上下文函數被調用。

的解決方案是將其轉換爲一個箭頭的功能，這使對this背景：

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

或更短：

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

要詳細瞭解，你可以閱讀例如MDN documentation。