1

我有一个表单，其中包含一些隐藏和可见的元素，我想提交一些元素而不验证隐藏的元素。在我的表单顶部有三个单选按钮，它们控制我的表单元素。When radiobutton1selected, 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 字段？

4

1 回答 1

1

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

于 2020-12-28T09:27:25.083 回答