Vue.js 表单提交没有看到更新的模型数据答案

【问题标题】：Vue.js form submit doesn't see updated model dataVue.js 表单提交没有看到更新的模型数据
【发布时间】：2020-12-20 15:04:41
【问题描述】：

我有一个启用了提交阻止的表单：

<form method="get" :action="urls.baseUrl" ref="productsFilterForm" @submit.prevent>

表单提交按钮如下所示：

<button type="submit" @click="submitForm" class="btn">{{ translations['search'] }}</button>

提交表单功能：

submitForm() {
    this.validateFilterValues();
    let form = this.$refs.productsFilterForm as HTMLFormElement;
    form.submit();
}

验证过滤器值：

validateFilterValues() {
    for (const [key, filter] of Object.entries(this.filters)) 
        filter.enabled = !(filter.value === null || filter.value === '' || filter.value == 0);
    }
}

过滤数据如下所示：

private filters: Record<string, Input> = {
    categories: { enabled: true, value: null },
    productId: { enabled: true, value: null },
    modificationId: { enabled: true, value: null },
    title: { enabled: true, value: null },
    barcode: { enabled: true, value: null },
    status: { enabled: true, value: null },
    descriptionStatus: { enabled: true, value: null },
    supplierCode: { enabled: true, value: null }
}

过滤数据进入输入组件：

<input-component id="formProductId"
                 type="number"
                 name="productId"
                 :label="translations['product_id']"
                 :placeholder="translations['product_id']"
                 :enabled="filters.productId.enabled"
                 :value="filters.productId.value"
/>

输入组件如下所示：

<div class="form-element">
    <label :for="id" :class="['form-element-title', { 'js-focused': focused }]">{{ label }}</label>
    <input :id="id" :name="enabled ? name : false" v-model="inputData" type="text" :placeholder="placeholder" @focus="focused = true" @blur="focused = false">
</div>

表单提交工作，但有一个问题。如果输入为空，则 validateFilterValues 函数会删除输入的名称。如果我在提交之前 console.log 表单变量。我看到空输入的名称已被删除。但问题是这些输入仍然通过表单提交到后端。我在这里错过了什么？

另外，如果我在提交时使用验证方法 - 它工作正常：

<form method="get" :action="urls.baseUrl" @submit="validateFilterValues()">

但我需要将提交作为一个单独的函数并防止输入键表单提交。

【问题讨论】：

没有看到 validateFilterValues() 就很难知道它在做什么..
我添加了更多代码，希望现在更清楚。
您的问题是某些输入在验证后变得无名还是提交了这些无名输入？
他们应该变得无名，而且确实如此。但它们仍然是通过表单提交的。
您是否尝试过将值 false 替换为 undefined，如下所示： :name="enabled ? name : undefined" ？

标签： javascript vue.js vuejs2

【解决方案1】：

正如我所说，您应该尝试延迟提交的执行，以确保您的验证循环在触发提交之前完成。

您可以做的最基本的事情就是以 0 秒的延迟触发超时提交。

setTimeout(() => form.submit(), 0)

这样，提交在事件循环的最后排队。

我根本不知道这是否是一个好习惯，我非常怀疑。但是您还有其他可能仅在某事结束后触发提交。

您可以使用经典回调

validateFilterValues(callback) {
    for (const [key, filter] of Object.entries(this.filters)) 
        filter.enabled = !(filter.value === null || filter.value === '' || filter.value == 0);
    }
    callback();
}

submitForm() {
    let form = this.$refs.productsFilterForm as HTMLFormElement;
    this.validateFilterValues(form.submit());
}

或承诺

validateFilterValues() {
  return new Promise((resolve, reject) => {
    try {
        for (const [key, filter] of Object.entries(this.filters)) 
            filter.enabled = !(filter.value === null || filter.value === '' || filter.value == 0);
        }
        resolve();
    } catch (err) {
        reject(err);
    }
  });
}

async submitForm() {
    await this.validateFilterValues();
    let form = this.$refs.productsFilterForm as HTMLFormElement;
    form.submit();
}

或任何其他形式的等待/延迟。选择权在你。

【讨论】：

【解决方案2】：

我找到的另一个解决方案是使用@keypress.enter.prevent:https://stackoverflow.com/a/60228936/5470563

但这仍然不是我想要的，因为在从 submitForm() 方法实际提交表单之前完全控制所有操作会很好。

【讨论】：