VueでCSV→JSON変換は「vue-papa-parse」を使うのがすごく便利だった

# npmを使う場合
npm i vue-papa-parse

# yarnを使う場合
yarn add vue-papa-parse

{
略
  "dependencies": {
    "bootstrap-vue": "^2.11.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-papa-parse": "^1.3.0"
  },
略
}

import Vue from "vue";
import App from "./App.vue";
import VuePapaParse from "vue-papa-parse";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(VuePapaParse);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

<template>
  <div>
    <b-form @submit="onSubmit">
      <b-form-file
        v-model="file"
        :state="Boolean(file)"
        accept=".csv"
        placeholder="Choose a file or drop it here..."
        drop-placeholder="Drop file here..."
      ></b-form-file>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      csvData: {},
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      this.$papa.parse(this.file, {
        header: true,
        complete: function(results) {
          this.csvData = results.data;
          console.log(this.csvData);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

<template>
  <div>
    <FileInput />
  </div>
</template>

<script>
import FileInput from "./components/FileInput.vue";

export default {
  name: "App",
  components: {
    FileInput,
  },
};
</script>

<style></style>