使用axios时不会触发Vue Watch

米科拉杰(MikołajMarciniak)

大家好,我有这段代码可以从axios的数据库中获取数据,在.then()函数中,我设置了data属性,watch不会触发。这是我目前拥有的一些代码。并预先感谢您!

export default {

    name: '..',
    data() {
        return {
            autocompleteOn: false
        }
    },

    watch: {
        autocompleteOn(oldVal, newVal) {
            console.log('autocomplet') // doesnt trigger this
        }
    },

    methods: {
        fetchAutocompleteResults: _.debounce((filter) => {
            let $this = this;



            let data = {
                filter: filter,
                page: $this.page
            };

            filter.resources.response = [];
            filter.loading = true;

            axios.post(BASE_URL + '/search/filter', data).then(function(response) {
                if (response.data.length) {
                    filter.autocompleteOn = true;
                    $this.autocompleteOn = true;
                    filter.resources.response = filter.resources.response.concat(response.data);
                    $this.currentFilter = filter;
                    $this.page++;
                    console.log($this.autocompleteOn); // this is correct
                }

                filter.loading = false;
            });
        }, 300)
    }

}
初级

debounce带箭头的功能是使this比Vue的实例(例如,其他的东西window)。

代替:

methods: {
    fetchAutocompleteResults: _.debounce((filter) => {

使用:

methods: {
    fetchAutocompleteResults: _.debounce(function (filter) {
//                                       ^^^^^^^^        ^^^

演示:

new Vue({
  el: '#app',
  data() {
    return {
      autocompleteOn: false
    }
  },
  watch: {
    autocompleteOn(oldVal, newVal) {
      console.log('autocomplet') // doesnt trigger this
    }
  },
  methods: {
    fetchAutocompleteResults: _.debounce(function (filter) { // CHANGED from arrow function
      let $this = this;

      let data = {
        filter: filter,
        page: $this.page
      };

      filter.resources.response = [];
      filter.loading = true;
      
      // changed data for demo
      data = [{title: 'foo', body: 'bar', userId: 1}];

      // changed URL for demo
      axios.post('https://jsonplaceholder.typicode.com/posts', data).then(function(response) {
        if (response.data.length) {
          filter.autocompleteOn = true;
          $this.autocompleteOn = true;
          filter.resources.response = filter.resources.response.concat(response.data);
          $this.currentFilter = filter;
          $this.page++;
          console.log($this.autocompleteOn); // this is correct
        }

        filter.loading = false;
      });
    }, 300)
  }
})
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

<div id="app">
  <button @click="fetchAutocompleteResults({resources: {}})">fetchAutocompleteResults</button>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章