I'm currently developing a SharePoint Framework web part with Vue.js.
Check out this code 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)
}
}
})
}
}
In the last return statement, how can I access the announcements and numOfAnnouncements properties in Vue's data?
I've attempted:
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)