Эффект загрузки не работает при вызове функции - PullRequest
Новая
       11

Эффект загрузки не работает при вызове функции

0 голосов
/ 04 декабря 2018

Я написал код для реализации эффекта загрузки.Однако, когда я нажимаю кнопку, эффект загрузки не работает.Но если я уберу функцию, эффект загрузки сработает.Кажется, функция предотвращает эффект загрузки во время работы.В чем проблема? 

 <template>
   <div v-loading="loading">
     <center><el-button @click="updateData">Click</el-button></center>
   </div>
 </template>


  data() {
    return {
      loading: false
    }
  },
  methods: {
    updateData() {
       this.loading = true
       uploadData().then(response => {
         const data = response.data
         if (data.code === 200) {
            this.$message.warning({ message: 'OK', duration: 5000 })
         } else {
            this.$message.error({ message: data.msg, duration: 5000 })
         }
       })
       this.loading = false
    },
    ....
  }

1 Ответ

0 голосов
/ 04 декабря 2018

Вы вызываете this.loading = false сразу после вашего uploadData() метода, который работает асинхронно.Поместите строку внутри вашего then() метода следующим образом: 

 <template>
   <div v-loading="loading">
     <center><el-button @click="updateData">Click</el-button></center>
   </div>
 </template>

  data() {
    return {
      loading: false
    }
  },
  methods: {
    updateData() {
       this.loading = true
       uploadData().then(response => {
         const data = response.data
         if (data.code === 200) {
            this.$message.warning({ message: 'OK', duration: 5000 })
         } else {
            this.$message.error({ message: data.msg, duration: 5000 })
         }
         this.loading = false
       })
    },
    ....
  }
...