我目前正在嘗試創建一個註冊表單,其中包含多個「輸入字段」組件,一旦按下提交按鈕後,所有組件都需要驗證。當它們中的文本被改變時,它們全部目前都自行驗證,但是我發現難以對所有輸入字段進行全局調用來驗證所有內容。我想實現如下:http://vee-validate.logaretm.com/examples#validate-form使用Vee-Validate和vue驗證子輸入組件js 2
是的,這是simmiler這個問題Validate child input components on submit with Vee-Validate 但我不明白
我有singleInput.vue
<template lang="html">
<div :class="'col m'+col">
<div class="input-field">
<i v-if="icon" class="material-icons prefix">{{icon}}</i>
<input
v-if="area"
:type="type"
@input="onChange"
:id="id"
:required="required"
:name="id"
v-validate="'required'"
/>
<textarea
v-if="!area"
@input="onChange"
:id="id"
:required="required"
:name="id"
class="materialize-textarea"></textarea>
<label :for="id">
{{label}}
<span v-if="required" class="red-text">*</span>
</label>
<span class="red-text error">{{$store.state.errors[id]}}</span>
</div>
</div>
</template>
<script>
export default {
name:'single-input',
props: {
col:{
type: Number,
default:6
},
id:{
type: String,
required:true
},
required:{
type:Boolean,
default: true
},
label:{
type:String,
required:true
},
onChange:{
type:Function,
required:true
},
area:{
type: Boolean,
default: true
},
type:{
type: String,
default: "text"
},
icon:{
type:String
},
validation:{
type:String
}
}
}
</script>
<style lang="css">
</style>
和Info.vue
<template lang="html">
<div class="row">
<single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input>
</div>
</template>
<script>
import SingleInput from "./SingleInput";
export default {
name: 'info',
methods:{
onChange(e){
}
},
data(){
return{
informations:[
{
label: "First Name",
id: "fname",
icon: "person"
},
{
label: "Last Name",
id: "lname",
required:false,
icon: "person"
},
{
label: "Email",
id: "email",
type:"email",
icon:'email'
},
{
label: "Telephone",
id: "phone",
type:"text",
icon:'phone'
},
{
label: "Department",
id: "depa",
type:"text",
icon:'domain'
},
{
label: "Organization",
id: "org",
type:"text",
icon:'account_balance'
},
{
label: "Address",
id: "address",
icon:'directions',
area: false,
col:12
},
{
label: "City",
id: "city",
type:"text",
icon:'place'
},
{
label: "Post code",
id: "post",
type:"text",
icon:'pin_drop'
}
]
}
},
components:{
SingleInput
}
}
</script>
<style lang="css">
</style>
我盡我所能,但無法訪問info.vue中的錯誤
任何幫助將不勝感激!
這很好,它觸發驗證器,但是catch()的邏輯並不完全正確,我認爲(它看起來好像沒有被捕獲)。容易解決這個問題,並且解決了這個問題。 – philw