When I click on the button, I want to validate the inputs for empty values. I am attempting to filter the array and add an error to the array if any of the inputs are empty. However, upon clicking the button, I encounter the error message "'ErrorList' of undefined". It seems like the issue stems from trying to access an array named ErrorList within the save method. How can I resolve this problem? You can also view my code on codesandbox
<template>
<div>
<form>
<div v-for="(learning, i) in general.learnings" :key="i">
<input type="text" v-model="general.learnings[i]" maxlength="120" />
</div>
<button @click="save">Save</button>
</form>
</div>
</template>
<script>
export default {
methods: {
save(e) {
e.preventDefault();
this.general.learnings.filter(function (el) {
if (el !== "") {
return true;
} else {
this.errorList.push("Error");
}
});
},
},
data() {
return {
errorList: [],
general: {
learnings: ["", ""],
},
};
},
};
</script>