In my Vue component, I have multiple child components that are inputs of the same type. The number of inputs can vary depending on the user, but there is a rule that at least one input must be filled. For example, there could be 5 inputs with 4 of them empty and still considered valid.
My issue is that I want to highlight the first input in red if all inputs are empty. I am checking the inputs in the parent component.
Here is a snippet of the parent component code:
<template>
<custom-input v-for="(input, key) in inputs_num" :key="key" />
</template>
<script>
data() {
return {
inputValues: [],
inputs_num: 1
}
}
methods: {
checkInputs() {
const validInputsCounter = 0;
this.inputValues.forEach((input) => {
if(input.trim().length > 4) validInputsCounter++;
});
if(validInputsCounter == 0) {
// Add border to the first input in the list.
}
}
...
...
}
</script>
I am struggling to figure out how to apply the border to only the first input in the list.