我有表单使用无线电交换选择列表,但验证消息似乎无法正常工作.这是我的表单,TypeA验证消息是有效的:

如果我单击提交按钮并且TypeA验证不正确并且我更改为TypeB以提交它,验证将不会通过,因为它看起来只是验证TypeA ...
这是我的代码:
<form id="form" @submit.prevent="validateBeforeSubmit">
<label>Type A</label>
<input type="radio" v-model="Type" value="TypeA" />
<label>Type B</label>
<input type="radio" v-model="Type" value="TypeB" />
<table>
<tr v-if="Type==='TypeA'">
<td>
<select v-model="TypeA" v-validate="'required|not_in:Choose'" name="TypeA">
<option v-for="option in TypeAOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeA')">
{{ errors.first('TypeA')}}
</span>
</td>
</tr>
<tr v-if="Type==='TypeB'">
<td>
<select v-model="TypeB" v-validate="'required|not_in:Choose'" name="TypeB">
<option v-for="option in TypeBOptions" v-bind:value="option.value">
{{ option.value }}
</option>
</select>
<span v-if="errors.has('TypeB')">
{{ errors.first('TypeB')}}
</span>
</td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script> …Run Code Online (Sandbox Code Playgroud)