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

时间:2017-10-13 07:53:23

标签: vue.js vuejs2 lodash es6-promise debounce

有谁知道如何在此方法去抖动之前执行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)
    }

1 个答案:

答案 0 :(得分:2)

创建另一个更改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)
}