vue-papa-parseでCSVをjson形式にパースしようとした時に躓いたthisの話

下記でvm.members.push(lines[i])となっているところをthis.members.push(lines[i])としていた時に、this.membersがundefinedになってmembersの値を変えられずに詰まった。

その時のthisはvueのthisではなく、vue-papa-parseのオブジェクトを指していたためmembersというプロパティがなくundefinedになっていた。
関数内で

const vm = this

して、以降vmを指定するようにすれば期待していた動きをするようになった。

<template>
          <div>
            <input
              ref="input"
              style="display: none"
              type="file"
              accept="text/csv"
              @change="loadCsvFile"
            />
            <button
              class="w-60 text-center bg-gray-200 transition duration-150 ease-in-out focus:outline-none border border-transparent focus:border-gray-800 focus:shadow-outline-gray hover:bg-gray-300 rounded text-indigo-700 px-5 h-10 text-sm"
              @click="btnclick"
            >
              CSVから会員情報を読み込む
            </button>
          </div>
</template>


<script>
export default {
  data() {
    return {
      members: [
        {
          id: "",
          name: ""
        },
      ],
    }
  },
  methods: {
    loadCsvFile(e) {
      const file = e.target.files[0]
      const vm = this
      // 関数の直下thisはvueのthis
      // その下（this.$papa.parse）の下だとvueのthisは参照されない
      // .pushでundefinedで躓いた時 配列かどうかを確認→thisを使ってたらthisの中身を
      this.$papa.parse(file, {
        header: true,
        complete: function (results) {
          console.log(this)
          const lines = results.data
          for (let i = 0; i < lines.length; i++) {
            vm.members.push(lines[i])
          }
        },
      })
    },
  }
}
</script>