Javascript I'；我正在尝试实现VeeValidate，以检查是否至少选中了一个复选框

我找到了一个我分叉然后编辑的JSFIDLE示例。我不知道发生了什么，也不知道如何解决。在我的示例中，我使用带有值的复选框，但当我单击某个复选框时，该值会根据是否单击该复选框而更改为true或false

const复选框={
模板：“#checkboxTmpl”，
数据（）{
返回{
文本：“”，
选项：[
{
名称：“Web”，
鼻涕虫：“网络”
},
{
名称：“iOS”，
slug:“ios”
},
{
名称：“安卓”，
slug:“安卓”
}
]
};
},
创建（）{
此.$validator.extend（'oneChecked'{
getMessage:field=>'至少需要检查一个'+field+'，
验证：（值，[testProp]）=>{
const options=this.options；
//log（'questions'，value，testProp，options.some（（option）=>option[testProp]）；
返回值| | options.some（（option）=>option[testProp]）；
}
});
},
方法：{
验证前提交（e）{
this.$validator.validateAll（）；//为什么此处未验证oneChecked？-->手动触发下面的验证
this.options.forEach（（选项）=>{
这是。$validator.validate（'platforms'，option.slug，['checked']）
});
console.log（'validator'，this.errors）；
如果（！this.errors.any（））{
警报（“已成功提交！”）；
} 
}
}
};
Vue.使用（验证）；
const app=新的Vue({
el:“#应用程序”，
渲染：（h）=>h（复选框）
})

{{option.name}
{{{errors.first（'platform'）}
{{options}}
提交

有两个主要问题：

在错误的键上使用

v-model

。事实上，每次选中或取消选中复选框时，它都会发出一个输入事件，该事件将修改选项的原始slug（在您的

数据中）。相反，您需要在选项中添加一个
选中的
字段。然后在模板中添加
：checked
属性，并将
v-model
修改为
：选项。选中

正如VeeValidate的文档所说，您可以使用

required

规则来确保必须选中复选框才能提交表单。这是通往文件的路。因此，您不需要创建

块

另外，

validateAll

函数返回一个包含验证结果的承诺。所以也不需要使用

this.errors.any（）

此外，我还将VeeValidate库升级为最新版本，因为您使用了beta版

以下是工作代码：

const复选框={
模板：“#checkboxTmpl”，
数据（）{
返回{
文本：“”，
选项：[{
名称：“Web”，
鼻涕虫：“网络”，
勾选：假
},
{
名称：“iOS”，
slug:“ios”，
核对：正确
},
{
名称：“安卓”，
slug:'安卓'，
核对：正确
}
]
};
},
方法：{
验证前提交（e）{
这是.$validator.validateAll（）。然后（值=>{
如果（值）{
警报（'已成功提交'）
}
})
}
}
};
Vue.使用（验证）；
const app=新的Vue({
el:“#应用程序”，
渲染：（h）=>h（复选框）
})

{{option.name}
{{{errors.first（'platform'）}
{{options}}
提交

谢谢！这个简化版本可以工作，但在我的实际应用程序中，我正在将道具中的对象传递给组件，以在编辑模式下填充表单。如果删除v-model属性，验证将工作，但复选框不会填充。我需要值和v型来填充字段。确定。我修改了原来的帖子。这是你期望的吗？太棒了！谢谢，我能够使用v-if v-else让它工作，其中checked是否存在取决于传递到道具中的对象。