0
選択リストを交換するためにフォーム使用ラジオがありますが、検証メッセージが正しく動作していないようです。 これは私の形態であり、タイプAの検証メッセージが仕事である： 
ラジオボタン交換で選択リストの検証にvee-validateを使用する
が、私は検証メッセージが動作していないタイプBラジオボタンを変更する場合： 
とも私はボタンとIFタイプAを提出する]をクリックした場合検証正しくないと私はそれを提出するTYPEBする変更のみタイプAを検証するように見えるので、検証が合格しないだろう...ここ
とは、私のコードです：
<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/[email protected]/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate);
var form = new Vue({
el: '#form',
data: {
Type: 'TypeA',
TypeA: 'Choose',
TypeAOptions: [{
value: 'Choose'
},
{
value: 'A',
},
{
value: 'B'
},
{
value: 'C'
},
{
value: 'D'
}
],
TypeB: 'Choose',
TypeBOptions: [{
value: 'Choose'
},
{
value: '1'
},
{
value: '2'
},
{
value: '3'
},
{
value: '4'
}
],
},
methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
alert("Submit Success");
return;
}
alert("Correct them errors!");
});
}
}
})
</script>私はこの問題を解決する方法がわからない、誰かが私を助けることができますか？
ありがとうございました。 –
ありがとうございます：実際に私はこのバリデータを使用したことはありませんでした。あなたのためにチェックしました:)これは非常に便利です – C2486