时间戳

首页 > 解决方案 > 如何将新对象添加到 Object Vuejs

javascript - 如何将新对象添加到 Object Vuejs

问题描述

我加载 csv 文件。该文件作为一个长字符串加载。我把这个字符串分成行（row）。然后我想将每一行拆分为一个对象并添加一个对象（jsonConvert）。但是，当我尝试将新行添加为对象时，我收到一条消息：

v-on 处理程序中的错误：“TypeError：this.jsonConvert.push 不是函数”。

<script>
export default {
  data() {
    return {
      csvData: "",
      jsonConvert: {},
      renderTable: false,
      uniqueCategory: [],
    };
  },
  methods: {
    onFileChange(e) {
      let files = e.target.files[0];

      let reader = new FileReader();
      reader.onload = (e) => (this.csvData = e.target.result.split("\n"));
      reader.readAsText(files);
    },
    parseToJSON() {
      let data = this.csvData;

      for (var i = 0; i < data.length; i++) {
        let row = [];
        row.push(data[i].split(","));
        const expense = new Object();

        expense.date = row[0][0];
        expense.category = row[0][2];
        expense.description = row[0][3];
        expense.amount = row[0][4];
        this.jsonConvert = this.jsonConvert.push(expense);
      }
      this.renderTable = true;
    },
  },
};
</script>

标签： javascriptvue.js

解决方案

jsonConvert是一个没有push数组方法的对象，为了添加新记录尝试初始化jsonConvert为数组：

  data() {
    return {
      csvData: "",
      jsonConvert: [],
      renderTable: false,
      uniqueCategory: [],
    };
  },

然后推送而不分配：

  ...
  expense.date = row[0][0];
  expense.category = row[0][2];
   expense.description = row[0][3];
   expense.amount = row[0][4];
  this.jsonConvert.push(expense);

推荐阅读