[英]Display progress bar vue flask
How can I display a progress bar in VUE while a process is running in Flask.在 Flask 中运行进程时,如何在 VUE 中显示进度条。 I believe it must be something similar to this code, but I can't get the function running.我相信它一定与此代码类似,但我无法让 function 运行。
HelloWorld.vue你好世界.vue
<template>
<div class="text-center">
<v-progress-circular v-show="isLoading" indeterminate></v-progress-circular>
<h1 v-if="predictedClass"> {{ myResult }} </h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
data: () => ({
isLoading: false,
myResult : ''
}),
mounted() {
axios
.get("http://127.0.0.1:5000/load").then(response => {
this.isLoading = response.data.load})
.get("http://127.0.0.1:5000/result").then(response => {
this.myResult = response.data.result})
}
}
</script>
app.py应用程序.py
from flask import Flask
app = Flask(__name__)
CORS(app)
api = Api(app)
@app.route('/load', methods=['GET'])
def loading_process():
return {"load": true}
@app.route('/result', methods=['GET'])
def process():
return {"result": "Some result"}
There is no use for the endpoint called load
.名为load
的端点没有用处。 Change mounted
to:更改mounted
到:
mounted() {
this.isLoading = true;
axios.get("http://127.0.0.1:5000/result").then(response => {
this.myResult = response.data.result;
this.isLoading = false;
})
}
Before making the api call set isLoading
to true
, and set it back to false
in the callback.在进行 api 调用之前将isLoading
设置为true
,并在回调中将其设置回false
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.