Regarding Vue function in dashboard - laravel

Question

We are experiencing problems after a Vue update. However, we cannot locate the error. Could anyone help us find this problem? This has occurred in the dashboard at a certain section where we show the payments from our users, so the admins can look into this.
The code:
addCollection: function (employee) {
var self = this;
year = 0;
var selectText =
'<div class="swal2-content" style="display: block;">Periode:</div>';
selectText +=
'<select id="swal-select1" class="swal2-select form-control" style="display: inline-block; width: calc(50% - 4px); margin-right: 4px;">';
for (year in self.vmAvailableYears) {
alert(this.year);
selectText +=
'<option value="' +
self.vmAvailableYears[year] +
'" ' +
(self.vmAvailableYears[year] == self.vmCurrentYear
? "selected"
: "") +
">" +
self.vmAvailableYears[year] +
"</option>";
}
selectText += "</select>";
selectText +=
'<select id="swal-select2" class="swal2-select form-control" style="display: inline-block; width: calc(50% - 4px); margin-left: 4px;">';
for (i = 1; i < 52; i++) {
selectText +=
'<option value="' +
i +
'" ' +
(i == self.vmCurrentWeek ? "selected" : "") +
">week " +
i +
"</option>";
}
selectText += "</select>";
selectText +=
'<div class="swal2-content" style="display: block;">Type:</div>';
selectText +=
'<select id="swal-select3" class="swal2-select form-control">';
selectText +=
'<option value="rent" style="' +
(self.vmCanAlter ? "" : "display: none;") +
'" data-amount-required="true" data-comment-required="false">Huur</option>';
selectText +=
'<option value="addition" data-amount-required="true" data-comment-required="true">Extra kosten</option>';
selectText +=
'<option value="payment_cash" selected data-amount-required="true" data-comment-required="false">Betaling contant</option>';
selectText +=
'<option value="payment_card" data-amount-required="true" data-comment-required="false">Betaling PIN</option>';
selectText +=
'<option value="payment_transfer" data-amount-required="true" data-comment-required="false">Betaling overboeking</option>';
selectText +=
'<option value="vacation_unpaid" data-amount-required="false" data-comment-required="false">Vakantie (doorbetalen)</option>';
selectText +=
'<option value="vacation_paid" data-amount-required="false" data-comment-required="false">Vakantie (niet doorbetalen)</option>';
selectText +=
'<option value="remission" data-amount-required="true" data-comment-required="true">Kwijtschelding</option>';
selectText +=
'<option value="comment" data-amount-required="false" data-comment-required="true">Opmerking</option>';
selectText += "</select>";
selectText +=
'<div id="swal-label1" class="swal2-content" style="display: block;">Bedrag:</div>';
selectText +=
'<input id="swal-input1" class="swal2-input" placeholder="Bedrag">';
selectText +=
'<div class="swal2-content" style="display: block;">Opmerking (<span id="swal-comment-label">optioneel</span>):</div>';
selectText +=
'<input id="swal-input2" class="swal2-input" placeholder="Opmerking">';
self
.$swal({
title:
employee.firstname +
" " +
employee.insertion +
" " +
employee.lastname,
html: selectText,
showCancelButton: true,
confirmButtonText: "Toevoegen",
cancelButtonText: "Annuleren",
showLoaderOnConfirm: true,
allowOutsideClick: false,
onOpen: function (el) {
$(el)
.find("#swal-select3")
.on("change", function () {
var selectedOption = $("option:selected", this);
var amountRequired = selectedOption.data("amount-required");
var commentRequired = selectedOption.data("comment-required");
var amountLabel = $("#swal-label1");
var amountInput = $("#swal-input1");
var commentInput = $("#swal-input2");
if (amountRequired) {
amountLabel.show();
amountInput.show();
} else {
amountLabel.hide();
amountInput.val("");
amountInput.hide();
}
commentInput.prop("required", commentRequired);
$("#swal-comment-label").text(
commentRequired ? "verplicht" : "optioneel"
);
});
$(el)
.find("#swal-select1, #swal-select2")
.on("change", function () {
const rentOption = $('#swal-select3 option[value="rent"]');
if (
self.vmCanAlter ||
self.weekIsInFuture(
$("#swal-select1").val(),
$("#swal-select2").val()
)
) {
rentOption.show();
} else {
rentOption.hide();
if ($("#swal-select3").val() == "rent") {
$("#swal-select3").val("payment_cash");
}
}
});
},
preConfirm: function (key) {
return new Promise(function (resolve, reject) {
if (
$("#swal-input2").prop("required") &&
$("#swal-input2").val().length <= 0
) {
reject("Opmerking is een verplicht veld.");
}
var postData = {
employee_id: employee.id,
type: $("#swal-select3").val(),
amount: $("#swal-input1").val().replace(",", "."),
comment: $("#swal-input2").val(),
year: $("#swal-select1").val(),
week: $("#swal-select2").val(),
};
self.resourceCollection.store(postData).then(
(response) => {
handleRequestSuccess(response);
resolve(response.data);
},
(response) => {
let handledResponse = handleRequestError(response);
if (handledResponse) {
reject(self.formatErrors(response.data));
}
}
);
});
},
})
.then(
(response) => {
let amount = parseFloat(response.amount);
if (["rent", "addition"].indexOf(response.type) > -1) {
employee.balance -= amount;
} else {
employee.balance += amount;
}
if (response.rent_subtract > 0) {
employee.collections.filter((collection) => {
employee.balance += parseFloat(collection.amount);
if (collection.type === "rent") {
collection.amount = 0;
}
});
}
employee.collections.push({
year: response.year,
week: response.week,
type: response.type,
amount: response.amount,
comment: response.comment,
admin: response.admin,
});
},
(rejection) => {}
);
}
The error:
[Vue warn]: Error in v-on handler: "ReferenceError: Can't find variable: year"
found in
---> <NdAdminCollectionEmployee> at resources/assets/js/vue/views/admin/collection/NdAdminCollectionEmployee.vue
<Root>
The other error:
ReferenceError: Can't find variable: year —
Kind regards,
Daan IV & Collin III