显示进度条vue flask答案

【问题标题】：Display progress bar vue flask显示进度条vue flask
【发布时间】：2021-01-08 04:13:09
【问题描述】：

当进程在 Flask 中运行时，如何在 VUE 中显示进度条。我相信它一定是类似于这段代码的东西，但我无法让函数运行。

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"}

【问题讨论】：

标签： javascript vue.js flask vuejs2 vue-component

【解决方案1】：

名为load 的端点没有用处。将mounted 更改为：

mounted() {
   this.isLoading = true;
   axios.get("http://127.0.0.1:5000/result").then(response => {
      this.myResult = response.data.result;
      this.isLoading = false;
   })
}

在进行api调用之前将isLoading设置为true，并在回调中将其设置回false。

【讨论】：