How can I display a progress bar in VUE while a process is running in Flask. I believe it must be something similar to this code, but I can't get the function running.
HelloWorld.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
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"}
question from:
https://stackoverflow.com/questions/65623365/display-progress-bar-vue-flask 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…