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

我有一个表单，其中包含一些隐藏的和可见的元素，我想在不验证隐藏元素的情况下提交一些元素。在我的表单顶部有三个单选按钮，它们控制我的表单元素。选择

radiobutton1

时，某些“我的表单”元素可见，而选择另一个单选按钮时，某些其他表单元素可见，而某些表单元素隐藏。我的问题是，如果表单元素是可见的，我将如何提交它们？所有的输入都应该是单一的形式，所以我不允许将它们分成不同的形式或不同的组件。我需要做的是，当我单击表单的

submit

按钮时，表单应该只提交可见的元素，并且不会向我发送任何错误，因为我将一些输入留空（隐藏的）

我也使用了Vuedalite，所以我不知道如何处理这个问题。表单中的所有输入字段都有

必需的
规则，但只有当它们可见时，此规则才应处于活动状态。

这里有一个小代码

<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单选按钮时，只有表单的Name字段可见，姓氏将隐藏，我已经这样做了，没有问题。但是，当姓氏仍然为空且具有所需规则时，如何仅提交名称字段？
您可以使用
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放在一起，因此它仍然发送“此字段是必需的”错误。