44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<template>
|
|
<div class="input-div">
|
|
<select
|
|
:class="className"
|
|
@input="$emit('update:modelValue', $event.target.value)"
|
|
v-model="input"
|
|
@change="validateInput"
|
|
>
|
|
<option v-if="empty" value="" disabled>{{empty}}</option>
|
|
<option :key="item.id" v-for="item in items" :value="item.id">{{item.value}}</option>
|
|
</select>
|
|
<ValidationError :msg="errors[name]"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from "vue";
|
|
import useFormValidation from "@/Validation/useFormValidation";
|
|
export default {
|
|
props:{
|
|
className:String|Object,
|
|
placeholder:String,
|
|
rules:Array,
|
|
items:Array,
|
|
empty:String
|
|
|
|
},
|
|
setup(props) {
|
|
let input = ref("");
|
|
const name = props.placeholder
|
|
const { validate, errors} = useFormValidation();
|
|
const validateInput = () => {
|
|
validate(props.rules,{},name, input.value);
|
|
};
|
|
|
|
if(props.errormsg){
|
|
errors[name] = props.errormsg
|
|
}
|
|
console.log("errors[name]",errors);
|
|
return { input,name, errors, validateInput };
|
|
},
|
|
};
|
|
</script>
|