带v-model的VueJS输入破坏了用户输入

Question

我有一个Vue组件，它的输入与v-model一起使用。从理论上讲，它可以正常工作，但实际上，它的工作真的很糟糕，如果我输入得太快，则输入值会被破坏（例如，输入azertyuiop将产生auip） 。
我不能输入太慢，因为输入内容会被扫描条形码填充（非常快）。

每次用户键入内容时，它都会使用 axios 发出请求，我想这是问题的根源，但我不知道该怎么办。

如何避免这个问题？

这是我的 Ordeline.vue ：

<template>
    <div class="field">
        <label class="label">{{ fullname }}</label>
        <div class="control">
            <input
                    :class="'input' + (value.valid ? '' : ' is-danger')"
                    v-model="modelValue"
                    type="text">
        </div>
        <p v-if="error !== null" class="help is-danger">
            <span class="tag is-danger">ERREUR</span>
            {{ error }}
        </p>
    </div>
</template>

<script>
import api from '../axios-wrapper';

export default {
    name: "orderline",
    props: {
        value: {required: true},
        apiTarget: {required: true}
    },
    computed: {
        modelValue: {
            get() {
                return this.value.imei;
            },
            set(val) {
                this.validate(val);
            }
        },
        fullname () {
            return this.value.title + ' ' + this.value.grade_name;
            // return this.value.make_name + ' ' + this.value.color_name + ' ' + this.value.expected_memory + 'Go ' + this.value.grade_name;
        }
    },
    data () {
        return {
            error: null
        }
    },
    methods: {
        validate (val) {
            api
                .post(this.apiTarget, {
                    imei: val,
                    make_id: this.value.expected_make,
                    make_name: this.value.make_name,
                    color_id: this.value.expected_color,
                    color_name: this.value.color_name,
                    memory: this.value.expected_memory,
                    grade_id: this.value.expected_grade,
                    grade_name: this.value.grade_name,
                })
                .then(response => {
                    this.error = null;
                    let clone = this.value;
                    clone.imei = val;
                    clone.valid = true;
                    this.$emit('input', clone);
                })
                .catch(error => {
                    this.error = error.response.data.message;
                    let clone = this.value;
                    clone.imei = val;
                    clone.valid = false;
                    this.$emit('input', clone);
                })
            ;
        }
    },
    mounted() {
        this.validate(this.modelValue);
    }
}
</script>