My challenge is to dynamically add and remove classes in response to input validation using the textfield component from Google Material. If the text input fails validation, I need to display a red border around the input field along with a warning message below it. On successful validation, a green check icon should appear as shown in the image below: https://i.sstatic.net/Joo8S.png. All user input undergoes regex validation and any errors are stored in an error array within the data structure. This allows me to easily track if there are any validation errors like in this example: https://i.sstatic.net/uvgVE.png.
The issue arises when trying to clear the input field. Even after clearing the input, the 'tf-error' class remains applied, causing the red borders to persist. Ideally, I would like to remove this class once the input has been reset. What steps should I take to achieve this?
gmcTextfield(
v-for='(item, idx) in textfields'
:key='idx'
:inputId='"textfield-"+idx'
label='item.label'
:className=`['fs', [textfields[idx].errors ? 'tf-error' : '']]`
:reference='item'
refProp='value'
:numOfErrorMsgs='item.numOfErrorMsgs'
)