使用laravel和vuejs输入期间的动态数据存储

我在vue js上有一个多步骤表单。在输入发送请求期间，我需要动态地在服务器上进行验证，并接收响应以显示验证错误

我的数据：

data() {
    return {
        form: {...this.candidate}, // we get an object with fields already filled *
        errors: new Errors(), // object with validation errors
    }
},

现在，对于每个输入，我都计算了属性：

characteristicFuturePlans: {
    get() {
        return this.form.characteristic_future_plans;
    },
    set(value) {
        this.saveField('characteristic_future_plans', value);
    }
},

saveField方法发送数据：

saveField(field, value) {
    this.form[field] = value; // keep the data in the object relevant
    axios.put(`/api/candidate/${this.candidate.token}`, {[field]: value})
        .then(() => { this.errors.clear(field) })
        .catch((error) => {
            this.errors.record(field, error.response.data.errors[field]);
        });
},

现在，每更改一次输入，就会发送一个请求。但使用这种方法，当我们在字段中快速键入文本时，有时发送的倒数第二个请求位于最后一个请求之后。事实证明，如果您快速编写“Johnny”，有时带有文本“Johnn”的查询会在带有文本“Johnny”的查询之后出现，错误的值将保存在数据库中

然后我确保数据在文本输入结束后1秒发送。将timerId:{}添加到data（）{}，然后：

saveField(field, value) {
    if(this.timerId[field]) {
        clearTimeout(this.timerId[field]);
    }
    this.timerId[field] = setTimeout(this.send, 1000, field, value);
},
send(field, value) {
    this.form[field] = value;
    axios.put(`/api/candidate/${this.candidate.token}`, {[field]: value})
        .then(() => { this.errors.clear(field) })
        .catch((error) => {
            this.errors.record(field, error.response.data.errors[field]);
        });
},

但是现在，如果在不到一秒钟的时间内填写完输入后，按下按钮进入表单的下一步，页面将简单地刷新。（转到下一步的按钮将向服务器发送请求，以检查所需字段是否已填写）

如何在文本输入期间正确地将数据保存到数据库？我可以在没有setTimeout（）的情况下执行此操作吗？如果是这样，我如何确保最后一个请求的数据而不是倒数第二个请求的数据存储在数据库中？ 我很乐意给你小费

已更新。附加一些模板代码

步骤[i]的一部分。vue组件：

<div class="row">
    <div class="form-group col-md-6">
        <element-form  title="Title text" :error="errors.get('characteristic_future_plans')" required isBold>
        <input-input v-model="characteristicFuturePlans" :is-error="errors.has('characteristic_future_plans')"
            :placeholder="'placeholder text'"/>
        </element-form>
    </div>
</div>

输入组件的模板：

<input :value="value" :type="type" class="form-control" :class="isErrorClass" 
       :placeholder="placeholder" @input="$emit('input',$event.target.value)">

表单步骤的组件从页面组件调用。附近是按钮的组件，用于移动到下一步

<component :is="currentStep"
           :candidate="candidate"
           // many props
           :global-errors="globalErrors"/>

<next-step :current-step="step" :token="candidate.token"
           @switch-step-event="switchStep" @throw-errors="passErrors"></next-step>

---

NextStep组件向服务器发送一个请求，它正在检查数据库中是否填写了所需的字段。如果没有，抛出一个验证错误。如果是这样，请转到下一个表单步骤。

您可以尝试查看输入值，然后使用underline.js（src:）中的

.debounce（）

延迟发出服务器请求的方法调用：

   watch: {
        fieldName: _.debounce(function(value) {
            if(value === ''){
                return;
            }
            this.saveField(this.fieldName, value);
        },
        ...

---

你能发布模板部分吗？@niklaz我添加了一些附加信息