javascript - Vuejs无法清除之前ajax的结果

Question

我想在 keyup 上向数据库发出即时请求。问题是:我无法清除以前的 ajax 请求的结果，即使我清除了包含它的数组，当我输入速度更快时它也不起作用。

第二个(较小的:D)问题是我必须制作嵌套循环才能使其工作。

我花了很多时间来解决这些问题......

Click to see an image

组件 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 调用时，组件 1 都会将响应数据存储在 this.max_invoice_response 中(关于组件 1)。下一步是使用 this.max_invoice_response 发出事件作为有效负载。此字段包含您迄今为止收到的所有回复。

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

不过要小心! HTTP 响应是异步处理的。由于每次按键都会触发一次，因此第二个字母的响应可能会比第一个字母的响应更早到达。