Aurelia: Bindable property doesn't change in most circumstances, but not all - aurelia

Question

I'm trying to set an error message to appear when doing some file upload in Aurelia.
The HTML is:
<div if.bind="fileErrorMessage !== null" class="text-center">
<span class="validation-error">${fileErrorMessage}</span>
</div>
The code for the error message is:
folderError(type) {
if (type === "folders") {
console.log("folders");
this.fileErrorMessage = "ABC";
console.log(this.fileErrorMessage);
} else if (type === "file") {
console.log("files");
this.fileErrorMessage =
"DEF";
console.log(this.fileErrorMessage);
} else if (type === "files_already") {
console.log("files already");
this.fileErrorMessage =
"GHI";
console.log(this.fileErrorMessage);
} else if (type === "folders_already") {
console.log("folders already");
this.fileErrorMessage =
"JKL";
console.log(this.fileErrorMessage);
}
}
For some reason, all console logs fire correctly but if I access the folderError function from outside the module that contains it, the appropriate console.logs fire (including the one that correctly states "this.fileErrorMessage") but the error message does not appear on the rendering.

Answer 1

I was able to fix it by converting the function into an arrow function.
folderError = (type) => {
if (type === "folders") {
console.log("folders");
this.fileErrorMessage = "ABC";
console.log(this.fileErrorMessage);
} else if (type === "file") {
console.log("files");
this.fileErrorMessage =
"DEF";
console.log(this.fileErrorMessage);
} else if (type === "files_already") {
console.log("files already");
this.fileErrorMessage =
"GHI";
console.log(this.fileErrorMessage);
} else if (type === "folders_already") {
console.log("folders already");
this.fileErrorMessage =
"JKL";
console.log(this.fileErrorMessage);
}
}