Vue.js 使用vee validate验证带有单选按钮的选择列表交换不显示验证消息

我有一个表单使用无线电交换选择列表，但验证消息似乎无法正常工作。 这是我的表单，TypeA验证消息不起作用：

但当我将单选按钮更改为TypeB时，验证消息不起作用：

另外，如果我点击提交按钮，如果TypeA验证不正确，我改为TypeB提交，验证将不会通过，因为它看起来像vee validate only validated TypeA

这是我的代码：

A型
B型
{{option.value}}
{{errors.first（'TypeA'）}
{{option.value}}
{{errors.first（'TypeB'）}
提交
Vue.使用（验证）；
var form=new Vue({
el:'表格'，
数据：{
键入：“TypeA”，
TypeA:'选择'，
类型选项：[{
值：“选择”
},
{
值：“A”，
},
{
值：“B”
},
{
值：“C”
},
{
值：“D”
}
],
类型B:'选择'，
类型选项：[{
值：“选择”
},
{
值：“1”
},
{
值：“2”
},
{
值：“3”
},
{
值：“4”
}
],
},
方法：{
ValidateBeforSubmit（）{
这是。$validator.validateAll（）。然后（（结果）=>{
如果（结果）{
警报（“提交成功”）；
返回；
}
警告（“纠正错误！”）；
});
}
}
})

使用

v-show

而不是

v-if

来观察更改，因为

v-if

在dom中添加/删除dom元素和vee验证检查

A型
B型
{{option.value}}
{{errors.first（'TypeA'）}
{{option.value}}
{{errors.first（'TypeB'）}
提交
Vue.使用（验证）；
var form=new Vue({
el:'表格'，
数据：{
键入：“TypeA”，
TypeA:'选择'，
类型选项：[{
值：“选择”
},
{
值：“A”，
},
{
值：“B”
},
{
值：“C”
},
{
值：“D”
}
],
类型B:'选择'，
类型选项：[{
值：“选择”
},
{
值：“1”
},
{
值：“2”
},
{
值：“3”
},
{
值：“4”
}
],
},
计算：{
},
方法：{
changeType:function（）{
this.errors.clear（）；
},
ValidateBeforSubmit（）{
这个.$validator.validate（this.Type）.然后（（结果）=>{
如果（结果）{
警报（“提交成功”）；
返回；
}
警告（“纠正错误！”）；
});
}
}
})

这个答案只是为了更新需要对Niklesh Raut的答案进行的一些更改，这是最初的答案，当时正确地回答了问题。 自那时起，vee valdiate已更新为V3.0，因此需要将vee validate的cdn指定为最新版本的V2.0。此外，根据以下链接，vee validate规则“not_in”被重命名为“excluded”：。 所以这些小改动将使Niklesh Raut的代码再次运行。非常感谢他和我 答案和问题的OP。考虑投票他们的答案和问题，如果你发现这是有用的（因为他们已经做了沉重的提升）。p>

A型
B型
{{option.value}}
{{errors.first（'TypeA'）}
{{option.value}}
{{errors.first（'TypeB'）}
提交
Vue.使用（验证）；
var form=new Vue({
el:'表格'，
数据：{
键入：“TypeA”，
TypeA:'选择'，
类型选项：[{
值：“选择”
},
{