javascript - TypeScript 和 this 关键字(SharePoint 框架和 Vue)

Question

我正在开发 SharePoint 框架 Web 部件并使用 Vue.js。

鉴于此片段:

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 .