FileReader.reader.onload VueJs

Question

我无法在数组中执行for循环或forEach，因为它说我未定义

我已经尝试过使用for，for和a。使用我喜欢Vue数据变量。 我将其设为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

这是因为在您的TabItems部分中，您没有为键data分配值。您应该在数据中进行i，并在for循环i : 0

中进行操作

Answer 2

最后，我更改了reader.onload内部函数中的所有内容，但使用self代替了它。可读性较差，但可以正常工作。