diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 71b14ace9..dd0cebdc7 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -154,9 +154,9 @@ export default { console.log("values: ", values); console.log("errors: ", errors); console.log("results: ", results); - // get errorEls and order by alpha - const errorEls = errors ? Object.keys(errors) : []; - const firstErrorEl = errorEls[0]; + // get error names array + const errorNames = errors ? Object.keys(errors) : []; + const firstErrorEl = errorNames[0]; if (firstErrorEl) { console.log('firstErrorEl: ', firstErrorEl); const qsString = "[data-focus-target='" + firstErrorEl + "']"; diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index c2c6c3fea..f75e9fd56 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -1,7 +1,7 @@ .has-error { - .list-button, - .list-card, - .list-button-horizontal { + &.list-button, + &.list-card, + &.list-button-horizontal { color: $red; label { border: 1px solid $red; diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 0d440010e..bd1fb6a70 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -2,7 +2,7 @@
{{buttonLabelSubCopy}} @@ -113,6 +113,7 @@ export default { const { value: inputValue, handleChange, + errors, } = useField(groupName, props.validationRules, { type: inputType, @@ -120,8 +121,14 @@ export default { }); return { handleChange, + errors, }; }, + watch: { + errors() { + console.log('HEADS UP; ERRORS CHANGED, errors.length: ', this.errors.length) + }, + }, };