laravel - 关于仪表板中的Vue功能

Question

我们在 Vue 更新后遇到了问题。但是，我们无法找到错误。谁能帮我们找到这个问题？这发生在仪表板的某个部分，我们在该部分显示用户的付款，因此管理员可以对此进行调查。

编码：

    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) => {}
    );
}

错误：

[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>

另一个错误：

ReferenceError: Can't find variable: year — 

亲切的问候，

大安四世和科林三世