feat(v-input): check error state from vee-validate errorMessage

gitsindonesia · May 10, 2022 · f4d6494 · f4d6494
1 parent 9d4b02a
commit f4d6494
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/packages/input/src/VInput.vue b/packages/input/src/VInput.vue
@@ -100,9 +100,13 @@ const sizeClass = computed(() => {
   return sizes[props.size];
 });
 
+const {value: inputValue, errorMessage} = useField(props.name, props.rules, {
+  initialValue: props.modelValue || props.value,
+});
+
 const inputVariantClass = computed(() => {
-  if (props.error) {
-    return 'border-error-500 focus:ring-error-500 focus:ring-opacity-50 focus:border-error-500 placeholder:text-error-500';
+  if (props.error || errorMessage.value) {
+    return 'border-error-500 focus:ring-error-500 focus:ring-opacity-50 focus:border-error-500';
   } else {
     const variants: Record<string, string> = {
       default:
@@ -124,10 +128,6 @@ const inputVariantClass = computed(() => {
     return variants[props.color];
   }
 });
-
-const {value: inputValue, errorMessage} = useField(props.name, props.rules, {
-  initialValue: props.modelValue || props.value,
-});
 </script>
 
 <template>