1

我想我在这里缺少 Vue JS 反应性的东西。

我的问题是，当我使用文件系统和 Adm-Zip 解压缩文件时，某些数据值没有更新。

这是一些伪代码来显示我的问题。

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)
}
4

0 回答 0