我正在尝试使用 vee-validate 为输入错误消息构建一个 Vue 输入组件。所有错误都正常工作,但是当我尝试相互确认两个输入时,错误消息会弹出但永远不会消失。
我的组件:
<template lang="pug">
div
.label {{ label }}
input(:type="type"
:value="value"
@input="$emit('input', $event.target.value)"
@change="$emit('input', $event.target.value)"
:placeholder="placeholder"
v-validate="validation"
:name="name"
:ref="name")
.message
img(v-if="errors.first(name)" src="/static/icons/error-input.svg")
.field(v-if="errors.first(name)") {{ errors.first(name) }}
</template>
<script>
export default {
inject: ['$validator'],
$_veeValidate: {
name () {
return this.name
},
value () {
return this.value
}
},
props: {
label: {
type: String,
required: false
},
placeholder: {
type: String,
required: false
},
validation: {
type: String,
required: false,
default: ''
},
type: {
type: String,
default: 'text',
required: false
},
value: {
type: String
},
name: {
type: String
}
}
}
</script>
当我想确认两封电子邮件时,如何从父组件调用它:
<template lang="pug">
v-form
text-input(v-model="email"
validation="required|email"
name="email")
text-input(v-model="confirm_email"
validation="required|email|confirmed:email"
name="confirm_email")
</template>
<script>
import { mapActions } from 'vuex'
import textInput from '@/newDesignComponents/inputs/input'
export default {
$_veeValidate: {
validator: 'new' // please set a $validator for this component
},
data () {
return {
email: null,
confirm_email: null
}
},
components: {
textInput
}
}
</script>
如果有人可以帮助我,那就太好了!