Vuejs - 如何在单个表单中仅提交可见元素（使用 Vuelidate）

Posted 2023-05-09

【中文标题】Vuejs - 如何在单个表单中仅提交可见元素（使用 Vuelidate）

【英文标题】：Vuejs - How to submit only the visible elements in a single form (with Vuelidate)

【发布时间】：2021-04-05 02:18:41

【问题描述】：

我有一个表单，其中包含一些隐藏和可见元素，我想提交一些元素而不验证隐藏元素。在我的表单顶部有三个单选按钮，它们控制我的表单元素。 When radiobutton1 selected, some of my form elements become visible and when another radio button is selected, there are some other form elements are visible and some of them are hidden.我的问题是，如果只有它们可见，我将如何提交我的表单元素？所有的输入都应该是一个单一的形式，所以我不能将它们分成不同的形式或不同的组件。我需要做的是，当我单击表单的submit 按钮时，表单应该只提交可见元素，并且它不应该向我发送任何错误，因为我将一些输入留空（隐藏的）。

我也使用 Vuedalite，所以我不知道如何处理这个问题。表单中的所有输入字段都具有 required 规则，但此规则应处于活动状态 ONLY IF THEY ARE VISIBLE.

这是一个小代码。

<form @submit.prevent="submitForm">
        <!-- Content Section -->
        <div v-show="showContent">
          <!-- Name Field-->
          <div>
            <div>
              <label>Name</label>
              <input v-model="name" :class="'is-invalid' : $v.networkname2GHz.$error " type="text"/>
              <small class="errorMessage" v-if="!$v.name.required && $v.name.$dirty">Name field is required.</small>
            </div>
          </div>

          <!-- Surname -->
        <!-- Content Section -->
        <div v-show="showContent">
          <!-- Surname Field-->
          <div>
            <div>
              <label>Surname </label>
              <input v-model="surname" :class="'is-invalid' : $v.surname.$error " type="text"/>
              <small class="errorMessage" v-if="!$v.surname.required && $v.surname.$dirty">Surnamefield is required.</small>
            </div>
          </div>
    <div show="showContent">
      <button type="submit">Save</button>
    </div>
</form>

我想要做的是当用户选择Name radio button 时，只有表单的名称字段可见并且姓氏将被隐藏，我已经做到了，没问题。但是如果 surname 仍然为空且有要求的规则，如何只提交 name 字段？

【参考方案1】：

您可以使用v-if 代替v-show。 两者的主要区别在于， v-if - 只有在表达式通过时才将元素渲染到 DOM。 v-show - 将所有元素渲染到 DOM，然后在表达式失败时使用 CSS 显示属性隐藏元素。

【讨论】：

问题是没有显示或隐藏元素。问题是只提交可见的并且没有错误。

如果您使用v-if，它将只提交可见的。我更新了我的答案，以便您获得一些线索。

因此，如果我将条件放入 v-if 语句中，例如 v-if="selected==radiobutton1" 等，它只会将所选项目呈现给 DOM，以便我只能提交可见的元素对吗？

是的，完全正确。如果可行，你会在我的答案上打勾吗？

我把我的 v-if 语句放在每个表单元素中，现在它们都在一个表单中，当我选择 radiobutton1 时它只显示两个输入元素，当我选择 radiobutton2 它显示其他元素和隐藏前两个输入。我尝试在选择 radiobutton1 时提交表单（所有其他人都用 v-if 隐藏）并且它向我发送错误，因为隐藏的那些是空的。我用 Vuelidate 设置了必需的规则，所以它仍然发送“此字段是必需的”错误。