將 object 推送到數組 vue.js

Question

我正在從 excel 獲取數據並嘗試將該數據保存到數組中。 我想在上傳 excel 文件時將對象推送到一個空數組中，但出現此錯誤Uncaught TypeError: Cannot read properties of undefined (reading 'push') 。 這是我的代碼：

<template>
  <div id="app">
    <input
      type="file"
      name="xlfile"
      id="xlf"
      v-on:change="displayFile($event)"
    />
    <b-table striped hover bordered :items="itemsList"></b-table>
  </div>
</template>

<script>
import * as XLSX from "xlsx/xlsx.mjs";
export default {
  name: "App",
  data() {
    return {
      itemsList: [],
    };
  },
  methods: {
    displayFile(e) {
      var files = e.target.files,
        f = files[0];
      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, { type: "binary" });
        let sheetName = workbook.SheetNames[0];
        let worksheet = workbook.Sheets[sheetName];
        let rowObject = XLSX.utils.sheet_to_row_object_array(worksheet);
        const finalJsonData = JSON.parse(
          JSON.stringify(rowObject, undefined, 4)
        );
        finalJsonData.map((item) => {
          this.itemsList.push(...item);
        });
        //console.log(typeof finalJsonData);
      };
      reader.readAsArrayBuffer(f);
    },
  },
};
</script>

Answer 1

解決方案相當簡單。 您的itemsList未定義，因為您的this不是您期望的（組件對象）。

將您的function更改為 Arrow function () => {} 。

// reader.onload = function (e) { // delete this line
reader.onload = (e) => { // add this line
  var data = e.target.result;
  var workbook = XLSX.read(data, { type: "binary" });
  let sheetName = workbook.SheetNames[0];
  let worksheet = workbook.Sheets[sheetName];
  let rowObject = XLSX.utils.sheet_to_row_object_array(worksheet);
  const finalJsonData = JSON.parse(
    JSON.stringify(rowObject, undefined, 4)
  );
  finalJsonData.map((item) => {
    this.itemsList.push(...item); // now 'this' is your component
  });
  //console.log(typeof finalJsonData);
};

我建議您閱讀function與箭頭函數() => {}中的綁定