When I click a button, I want to validate input fields for emptiness. Specifically, I am filtering an array to check if any of the inputs are empty. My goal is to add an error message to the array only for those inputs that are empty. However, the issue I'm facing is that the error message is being added even for inputs that are not empty.
<template>
<form>
<div v-for="(learning, i) in general.learnings" :key="i">
<input
type="text"
v-model="general.learnings[i]"
maxlength="120"
/>
</div>
<p
style="background: red"
v-for="(i, index) in errorList"
:key="'A' + index"
>
{{ i }}
</p>
<button @click="save">Save</button>
</form>
</template>
<script>
export default {
methods: {
save(e) {
this.general.learnings.filter((e, index) => {
if (!e[index]) {
this.errorList.push("Error")
} else if (e[index] !== "") {
this.errorList = [""];
}
});
e.preventDefault();
},
},
data() {
return {
errorList: [],
general: {
learnings: ["", ""],
},
};
},
};
</script>
It seems like the issue may be with
this.errorList.push("Error")