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

Question

你好，节日快乐！

我需要有关如何从外部函数获取数据的建议，该外部函数会在我的vuejs组件中生成一个zip文件，以为JSZip插件创建进度条：https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html

我导入我的文件：从{@ / 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
        );
      }
...

一切正常，现在我添加了一些显示zip进度的反馈。我将在downloader.js中调用一个可用的回调函数“ updateCallback”

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
}

很酷，它会在我的控制台日志中显示进度。

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

非常感谢！

Answer 1

在vue组件中使用数据属性。在回调内部，将您的实例（this）链接到本地​​var，以在回调数据和反应性属性之间传递值。例如：let var = this