«Я не определен» в FileReader.reader.onload VueJs

Question

Я не могу выполнить ни цикл for, ни forEach в массиве, потому что он говорит, что я не определен

Я уже пытался использовать некоторое время a для a для каждого. Используйте мне нравится переменная данных Vue. Я установил что let self = this, потому что область видимости меняется в этом reader.onload. и я знаю, что проблема должна быть с чем-то вроде этого.

<template>
  <div>
    <p>My File Selector: <file-select v-model="file"></file-select></p>
    <p v-if="file">{{file.name}}</p>
    <v-btn v-if="file" @click="importFile">Import</v-btn>
    <div id="fileContents">

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

<script>
  import icsToJson from 'ics-to-json'
  import FileSelect from './FileSelect.vue'

    export default {
        name: "ViewImport",
        components: {
          FileSelect
        },
        data(){
          return {
            file: null,
            fileInJson: null,
            categories: [],
            importExists: false,
            i
          }
        },
        created(){
            this.getCategories();
        },
        methods:{
            getCategories(){
              //this works 
           },
            importCreatingCategoryImport(){
              //code, this works 
            },
            doesImportExists(){
              for (var i = 0; i < this.categories.length; i++){
                if (this.categories[i].category.name === 'Import'){
                  this.importExists = true;
                  // break;
                }
              }
            },
            importFile(){
              if (this.file) {
                let reader = new FileReader();
                reader.readAsText(this.file, "UTF-8");
                let self = this;
                reader.onload = function (evt) { //If everything works 
                  //Changes the file to format JSON 
                  self.fileInJson = icsToJson(evt.target.result);

                  self.doesImportExists();//the loop

                  if (self.importExists){
                      console.log('Category exists');
                      //other method
                  }else{
                      console.log('not working'); //Because its in my BD
                    // self.importCreatingCategoryImport();
                  }

                };
                reader.onerror = function (evt) { //if it doesn't
                  document.getElementById("fileContents").innerHTML = "error reading file";
                }
              }
            },

        }
    }
</script>
//style commented

Answer 1

В конце я изменил все, что было в моей функции внутри reader.onload, но вместо этого с self. Менее читабелен, но работает.

Answer 2

Это потому, что в вашем разделе data вы не присвоили значение клавише i.Вы должны сделать i : 0 в ваших данных, и в течение цикла let j = this.i; j < this.categories.length; j++)