0

I'm new to Vue, I tried some similar potential solutions I found but none worked:

I need to update this.data_object from within a method, which contains nested functions. I can't figure out the inheritance.

I've tried this which doesn't exist, a copy of vm. from my main.js file, vm.$root and a few other combos.

Here is example code:

//this method is called on a file upload dropzone with :on-change="handlePreview"
handlePreview(file,files) {//file
   
    var reader = new FileReader();
    reader.onload = function (reader) {
        
        papaparse.parse(reader.target.result, {
            step: function(row) {
                console.log("Row:", row.data);
                //this is where i need to update data for this template. i defined this as data.preview_table{items:[]}
                vm.this.preview_table.items.push(row.data)
            }
        });

    }

    reader.readAsText(this.files[0].raw, "UTF-8");
   
}

Thanks for the help here is updated code where inheritance works:

handlePreview(file,files) {//file
   
    var reader = new FileReader();
    reader.onload = (reader) => {
        
        papaparse.parse(reader.target.result, {
            worker: true,
            //header:true,
            delimiter: ",",
            download: false,
            preview: 6,
            step: (row) => {
                console.log("Row:", row.data);
                console.log(this.is_preview_loaded)
                this.preview_table.items.push(row.data)
            },
            complete: (event) => {
                console.log(event)
            },
            error: (error,file) => {
                console.log(error)
                return swal.fire({
                    title: `Error parsing this file`,
                    text: 'Please double check this is a correct CSV file',
                    buttonsStyling: false,
                    icon: 'warning'
                })
            }
        });

    }

    reader.readAsText(this.files[0].raw, "UTF-8");
},
tony19
  • 125,647
  • 18
  • 229
  • 307
Dillon Doyle
  • 305
  • 3
  • 14
  • Use arrow functions to preserve a declare-time `this` , not plain functions. E.g. don't use `reader.onload = function (...) { ... };`, but use `reader.onload = () => { ... };` instead. – Mike 'Pomax' Kamermans Sep 07 '21 at 22:23
  • Awesome thank you this worked sorry I couldn't find that hopefully the 'vue' keywords here help. For anyone googling added my updated code above: – Dillon Doyle Sep 07 '21 at 23:17
  • 2
    Don't post your fixed code into your question: make that an answer. Or delete the question (since arrow functions are pretty standard JS fare and have been for a few years =) – Mike 'Pomax' Kamermans Sep 07 '21 at 23:36
  • The problem has nothing to do with inheritance. – tony19 Sep 08 '21 at 03:15

0 Answers0