Question

我想在keyup上向DB发出即时请求。问题是：我无法清除以前的ajax请求的结果，即使我清除包含它的数组，当我输入更快时它也无法工作。

第二个（较小的：D）问题是我必须制作嵌套循环才能使其正常工作。

我正在努力解决这些问题......

组件1：HTML

   <input v-model="invoice_number" type="text" name="invoice_number" class="form-control" id="" placeholder="Invoice number" @keyup="max_invoice_number" required>

组件1：javascript

 max_invoice_number: function() {

        axios.get('/max_invoice_number/' + this.invoice_number)
        .then(response => this.max_invoice_response.push({ 
           info: response.data

       }));

        Event.$emit('max_invoice_response', this.max_invoice_response);
    },

组件2 HTML

<div v-for="a in max_invoice_response" class="bg-success col-xs-12">
            <div v-for="b in a">{{b.info}}</div>
        </div>

组件2 Javascript

data(){
        return{ 

            ref_numbers: [],
            max_invoice_response: []
        }
    },

    created: function(){

        Event.$on('max_invoice_response', function(response) {  this.clear; this.max_invoice_response.push(response); }.bind(this));

    },

    methods: {
        clear: function() {
            this.max_invoice_response.splice(0);
        }

    },
}

Answer 1

除了缺少括号外，请假设调用clear方法并清空组件2中的数组。

每次进行AJAX调用时，我都会将响应数据存储在this.max_invoice_response中（在组件1上）。下一步是以this.max_invoice_response作为有效负载发出事件。此字段包含您目前收到的所有响应。

因此，在处理组件2中的事件时，您也会收到所有响应。当您清除阵列时，它仍会将所有响应推送到组件2的this.max_invoice_response。因此，您还需要清除组件1，或者只是覆盖您存储的数据。

虽然小心！ HTTP响应处理为异步。由于每个键都会触发一个键，因此第二个字母的响应可能比第一个字母的响应更早到达。

Answer 2

解决了！去抖是我需要的功能。如果有人处于相同的情况，这是我的代码。

 max_invoice_number: _.debounce(function() {

         this.max_invoice_response = [];

         axios.get('/max_invoice_number/' + this.invoice_number)
         .then(response => this.max_invoice_response.push({ 
           info: response.data

       }));

         Event.$emit('max_invoice_response', this.max_invoice_response);
     },300),

Vuejs无法清除之前ajax的结果

2 个答案: