1

I think I am missing something with Vue JS reactivity here.

My problem is that some data values are not updating while I am unzipping a file using File System and Adm-Zip.

Here is some pseudo code to show my issue.

export default {
    data () {
        return {
            unzipped: 0,
            total: 0
        }
    },
    methods: {
        unzipFile (fileName) {
            var that = this

            let r = fs.createReadStream(fileName)
            let w = fs.createWriteStream('archive.zip')

            let i = 0

            r.pipe(w).on('close', function () {

                    var zip = new AdmZip('archive.zip')
                    var zipEntries = zip.getEntries()

                    that.total = zipEntries.length // not updating

                    zipEntries.forEach(function (zipEntry) {
                        zip.extractEntryTo(zipEntry.entryName, dir + 'video', false, true)
                        i++
                        that.unzipped = i // not updating
                    })

            })
            // updates are made here
        }
    }
}

that.total and that.unzipped are not updating while the code executes.

Here is the template code where I show the progress.

<template>
    <div>
        {{ unzipped }}/{{ total }}
    </div>
</template>

Any help appreciated.

Edit Here is a tested method where the data properties are updated successfully.

testUpdate () {
    var that = this
    that.total = 100
    setInterval(() => {
        that.unzipped++
    }, 1000)
}
CUGreen
  • 3,066
  • 2
  • 13
  • 22
  • 1
    How do you know they're not updating? Are you even calling `unzipFile()`? – Phil May 27 '20 at 00:45
  • Is your issue reproducible without streams? For example, can you reproduce the issue with timeouts? It may have nothing to do with the streams. – Dylan Landry May 27 '20 at 00:49
  • @Phil, yes, I am calling the method. As I mentioned, this is pseudo code, I only included relevant parts – CUGreen May 27 '20 at 00:50
  • Could you please address my first question... _"How do you know they're not updating?"_ – Phil May 27 '20 at 00:54
  • @DylanLandry, yes, just updated my question with a setInterval test and it works there – CUGreen May 27 '20 at 00:55
  • Also, what library is providing `fs` in the browser? – Phil May 27 '20 at 00:57
  • Sorry @Phil, because in my template I have `{{ unzipped }}/{{ total }}` and it does not update. – CUGreen May 27 '20 at 00:59
  • @Phil, `fs` is nodejs filesystem (https://nodejs.org/api/fs.html) – CUGreen May 27 '20 at 01:00
  • 1
    Yes, but your Vue code runs in the browser. Have you checked your console for errors? I suspect there might be some – Phil May 27 '20 at 01:01
  • @Phil, no errors, console.log works in the extract routine but data properties do not update – CUGreen May 27 '20 at 01:03
  • 2
    Is the close event firing? Like Phil suggests, maybe that method throws because fd module doesn't exist. Maybe try adding an new reactive property to a data object with `vue.set`, to see if that works. – Dylan Landry May 27 '20 at 01:03
  • `Vue.set` does not work either. It appears that the whole view freezes during the unzip process. Perhaps I need to step out the extraction of each file into a method and wait until it is finished before the next. Thanks for all the help. – CUGreen May 27 '20 at 01:19

0 Answers0