Блог

Я новичок в vuejs. Это то, чего я пытаюсь достичь:

1. Пользователь загружает файлы на сервер =gt; Сервер отвечает JSON, содержащим идентификатор (список идентификаторов заданий)
2. После нажатия кнопки отправить пользователю отображается статус обработки файлов. (таким образом, повторяя список идентификаторов заданий, чтобы получить их статус; задание удаляется из списка, когда задание выполнено) =gt; Таким образом, действует как индикатор выполнения.

Помимо асинхронной проблемы; моя главная проблема заключается в том, что статус отображается только в конце задания (т. Е. При удалении из списка).

Спасибо вам за вашу помощь.

Это мой код до сих пор (фигурные скобки предназначены для шаблонов Django):

 lt;div id="vue-app"gt;  lt;divgt;  [[job_ids]]  lt;form method="post" enctype="multipart/form-data"gt;  {% csrf_token %}  lt;input type="file" ref="file" v-on:change="handleFileUpload()" name="files" multiplegt;  lt;input v-on:click.prevent="submitForm" type="submit" value="submit"gt;lt;/buttongt;  lt;/formgt;  lt;ul id="example-1"gt;  lt;li v-for="item in temp" :key="item.id"gt;  [[item.id]] : [[ item.current]] / [[ item.total ]]  lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt;  

 const app = new Vue({  el: "#vue-app",  delimiters: ['[[', ']]'],  data: {  myTitle: "é",  success_msg: "http://localhost:8000{% url 'upload_proto' %}",  files: "null",  job_ids: [],  status: {},  temp: {}  },  created() {  setInterval(this.jobsStatus, 5000)  },  methods: {  submitForm: function () {  var formData = new FormData();  formData.append('files', this.files)  for (var i = 0; i lt; this.files.length; i  ) {  let file = this.files[i];  formData.append('files', file);  }  axios.post("http://localhost:8000/proto/upload/", formData,  {  headers: {  'X-CSRFTOKEN':  '{{ csrf_token }}', 'Content-Type':  'multipart/form-data'  }  }  ).then(response =gt; {  this.job_ids = response.data;  }).catch(err =gt; {  this.err_msg = err.response.data['err'];  });  },  handleFileUpload: function () {  this.files = this.$refs.file.files;  },  getJobStatus: async function (i) {  return await axios.get("http://localhost:8000/poll_state?job="   this.job_ids[i])  .then(response =gt; {  this.temp[this.job_ids[i]] = response.data  }  )  .catch(err =gt; {  console.log(err)  })  },  jobsStatus: function () {  for (var i = 0; i lt; this.job_ids.length; i  ) {  this.getJobStatus(i)  if (this.temp[this.job_ids[i]] !== "PENDING") {  if (this.temp[this.job_ids[i]].current === this.temp[this.job_ids[i]].total) {  this.job_ids.splice(i, 1);  }  }  }  return null  }  }  });