javascript - 在 vuejs 组件中使用外部回调函数数据
问题描述
你好,节日快乐!
我需要关于如何从生成 zipfile 到我的 vuejs 组件中的外部函数获取数据的建议,以便为 JSZip 插件创建进度条:https ://stuk.github.io/jszip/documentation/api_jszip/generate_async.html
我导入我的文件: import { generateZIP } from "@/utils/downloader.js";
并通过按钮从方法触发在 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
);
}
...
一切正常,现在我添加一些显示压缩进度的反馈。我将在 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 以在我的应用程序中显示它?
非常感谢 !
解决方案
在你的 Vue 组件中使用数据属性。在回调内部,将您的实例 (this) 链接到本地 var,以在回调数据和反应属性之间传递值。例如:让 var=this
推荐阅读
- python - 嵌套列表在没有任何干预的情况下更改其值
- mongodb - 如何使用使用 MongoDB 聚合的条件进行查找
- sql - 如何根据参数值更改 Where 语句 - Postgres
- php - php json_encode 响应将 html 发送回 ajax jquery 请求而不是 json
- docusignapi - 使用 Docusign 进行“点击签名”
- google-cloud-platform - 在 AI Platform 中使用 `capture_tpu_profile`
- javascript - Highcharts yAxis.max 动态管理刻度间隔
- python - Keras:您传递给模型的 Numpy 数组列表不是模型预期的大小
- scala - 没有证据的证据
- java - java.lang.RuntimeException:在类 androidx.appcompat.widget.AppCompatImageView 上发现名称 isImportantForAccessibility 的 getter 冲突