Vue.js 如何使用vee validate在无需输入的情况下验证data()值
我有一个按钮,用于加载文件或添加一些文本Vue.js 如何使用vee validate在无需输入的情况下验证data()值,vue.js,vee-validate,Vue.js,Vee Validate,我有一个按钮,用于加载文件或添加一些文本 加载后将其推入data()prop 如果他们没有输入,我如何验证这个道具 Im只找到了一个解决方案——制作数据道具。并在 也许存在更美的方式 我尝试validator.verify()-但它不会从validateAll发送主错误包中的错误 这就是一个例子 <div id="app"> <testc></testc> </div> <script type="text/x-template" id
加载后将其推入data()prop
如果他们没有输入,我如何验证这个道具 Im只找到了一个解决方案——制作数据道具。并在
也许存在更美的方式 我尝试validator.verify()-但它不会从validateAll发送主错误包中的错误 这就是一个例子
<div id="app">
<testc></testc>
</div>
<script type="text/x-template" id="test">
<div>
<input type="text" v-validate="'required'" name="test_vee">
{{errors.first('test_vee')}}
<hr>
<button @click="addRow">Add</button>
<input type="text" v-model="inputValue" name="test_input"/>
<hr>
{{rows}}
<hr>
{{errors.first('rows')}}
<button @click="validateForm">Validate</button>
</div>
</script>
{{errors.first('test_vee')}
添加
{{rows}}
{{errors.first('rows')}
验证
和脚本
Vue.component('testc', {
template: '#test',
data() {
return {
inputValue: '',
rows: []
}
},
watch: {
rows: {
handler: function(newVal, oldVal) {
this.$validator.errors.remove('rows');
if (this.rows.length < 2) {
this.$validator.errors.add({
id: 'rows',
field: 'rows',
msg: 'Need 2 rows!',
});
}
}
}
},
methods: {
addRow: function() {
this.rows.push(this.inputValue);
this.inputValue = '';
},
validateForm: function(){
this.$validator.validateAll();
}
}
});
Vue.use(VeeValidate);
new Vue({
el: '#app'
})
Vue.component('testc'{
模板:“#测试”,
数据(){
返回{
输入值:“”,
行:[]
}
},
观察:{
行:{
处理程序:函数(newVal、oldVal){
这是。$validator.errors.remove('rows');
if(this.rows.length<2){
这是。$validator.errors.add({
id:'行',
字段:“行”,
msg:'需要两行!',
});
}
}
}
},
方法:{
addRow:function(){
this.rows.push(this.inputValue);
this.inputValue='';
},
validateForm:function(){
这是。$validator.validateAll();
}
}
});
Vue.使用(验证);
新Vue({
el:“#应用程序”
})
示例中的第一个输入:默认验证-其确定第二个输入:用于添加项目-不需要验证或具有自验证(例如不为空)
在组件的数据中,我有prop行-在ajax请求后端保存数据之前需要进行验证