在去抖之前模拟加载微调器

Question

有谁知道如何在此方法中的去抖之前执行 this.isLoading = true？

它应该是一个加载微调器，当通过 axios 进行异步调用时，它会被动画化。

    methods: {
        searchAdminUsers: _.debounce(function(query) {
            this.isLoading = true       
            axios.get('api/searchEmployees?format=json', { params: { q:query } })
            .then(response => {
                let data = response.data.map(item => (
                    { text: `${item.FIRSTNAME} ${item.LASTNAME} - ${item.POSITION}`, id: item.ID }
                ))
                this.options = data
                this.isLoading = false
          })
          .catch(error => {
            console.log(error)
          })
        }, 250)
    }

Answer 1

创建另一个更改 this.isLoading 的方法，并调用 debounces 方法。

methods: {
    wrapSearchAdminUsers(query) {
      this.isLoading = true

      this.searchAdminUsers(query)
    }

    searchAdminUsers: _.debounce(function(query) {
        axios.get('api/searchEmployees?format=json', { params: { q:query } })
        .then(response => {
            let data = response.data.map(item => (
                { text: `${item.FIRSTNAME} ${item.LASTNAME} - ${item.POSITION}`, id: item.ID }
            ))
            this.options = data
            this.isLoading = false
      })
      .catch(error => {
        console.log(error)
      })
    }, 250)
}

在去抖之前模拟加载微调器

Simulating a loading spinner before debounce

vue.js

vuejs2

lodash

es6-promise

debounce