48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div class="input-div">
|
|
<input
|
|
autocomplete="off"
|
|
:class="className"
|
|
:placeholder="placeholder"
|
|
:type="type"
|
|
@input="$emit('update:modelValue', $event.target.value)"
|
|
v-model="input"
|
|
@keyup="validateInput"
|
|
@blur="validateInput"
|
|
/>
|
|
<ValidationError :backend="backend" :msg="messages"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {reactive, ref} from "vue";
|
|
import useFormValidation from "@/Validation/useFormValidation";
|
|
export default {
|
|
props:{
|
|
className:String|Object,
|
|
placeholder:String,
|
|
type:String,
|
|
rules:Array,
|
|
backend:String,
|
|
errors:Array
|
|
},
|
|
setup(props) {
|
|
let input = ref("");
|
|
let messages = ref([])
|
|
const name = props.placeholder
|
|
|
|
//const { validate, errors} = useFormValidation();
|
|
|
|
const validateInput = () => {
|
|
messages.value = []
|
|
if(props.errors[0]) {
|
|
messages.value.push(props.errors[0])
|
|
}
|
|
}
|
|
//console.log('ccc',messages)
|
|
return { input,name,messages,validateInput };
|
|
}
|
|
|
|
};
|
|
</script>
|