Vue JS-处理zip文件时更新数据值

我想我遗漏了一些关于Vue-JS反应性的东西。

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 和 that.unzipped 在代码执行时不更新。

下面是我显示进度的模板代码。

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

感谢您的任何帮助。

编辑 下面是一个测试过的方法,其中数据属性被成功更新。

testUpdate () {
    var that = this
    that.total = 100
    setInterval(() => {
        that.unzipped++
    }, 1000)
}