Javascript 在vuejs组件内使用外部回调函数数据

你好，节日快乐

我需要关于如何从生成zipfile到vuejs组件的外部函数获取数据的建议，以便为JSZip插件创建进度条：

我导入我的文件： 从“@/utils/downloader.js”导入{generateZIP}

并通过按钮从方法触发器在vuejs内部调用它：

<template>
...
<div v-for="result of results" :key="result.item.refID">
        <section class="row" @click="selectByRow(result.item)">
          <input
            type="checkbox"
            :id="result.item.refID"
            :value="result.item.refID"
            v-model="checkedItems"
            class="checkbox"
          />
          </div>
          <!-- FOUND RESULTS -->
          <div class="name">{{ result.item.marketingName }}</div>
        </section>
      </div>
      <!-- Download all checked items -->

      <div>
        <button
          v-if="checkedItems.length > 1"
          @click="downloadAll(checkedItems)"
          class="button"
        >
          Download Selection
        </button>
</template>
...
<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { generateZIP } from "@/utils/downloader.js";
...

export default {
data() {
    return {
      // Path to point to pictures storage
      domainName: this.$domainName,
      // Array to gather search results
      searchArray: [],
      checkedItems: [],
      // make a special array for row selection
      checkedRow: []
    };
  },
  methods: 
     downloadAll(files) {
      // Prepare path
      const fullPath = `${this.domainName}/files/${this.reqPath}/`;

      const filesArray = [];
      files.forEach(fileID => {
        let obj = this.results.find(value => value.item.refID == fileID);
        if (obj.item.images !== undefined) {
          filesArray.push(obj.item.images);
        }
      });
      generateZIP(filesArray.flat(), fullPath);
    },
 selectByRow(resultID) {
      // Check if select resultID.refID is already in checkedItems and store it in variable if its present.
      const isInArray = this.checkedItems.find(name => name === resultID.refID);
      // if the ref not in array, add it
      if (!isInArray) {
        this.checkedItems.push(resultID.refID);
        // Add checkedRow full information object
        this.checkedRow.push(resultID);
      } else {
        // if already in array, remove it
        this.checkedItems = this.checkedItems.filter(
          name => name !== resultID.refID
        );

        this.checkedRow = this.checkedRow.filter(
          name => name.refID !== resultID.refID
        );
      }
...

酷它在我的控制台日志中显示进度

但我如何将此元数据对象导入vue以在我的应用程序中显示它

---

非常感谢

在vue组件中使用数据属性。

---

在回调内部，将实例（this）链接到本地var，以便在回调数据和反应属性之间传递值。例如：让var=this

你能添加一些关于你已经拥有的（Vue）代码的更多信息吗？我添加了完整的方法代码，vuefile相当大，我不想造成污染。“文件”数组是与图片URL、它们的名称和相对路径相对应的对象列表。我从我的下载程序下载这些图片，并将它们收集到一个zip中。您可以删除代码，使其仅包含与您的问题相关的部分，有关详细信息，请参阅。抱歉，但我如何将其重要化到我的vue组件中？？（我检查了被动属性文档，但没有得到它…他们使用Vue.set或此。$set，但我不明白如何将其应用于我的案例

zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
    console.log("progression: " + metadata.percent.toFixed(2) + " %");
    if(metadata.currentFile) {
        console.log("current file = " + metadata.currentFile);
    }
})
...
export {
  generateZIP
}