Within my component, I have a dynamically generated object structured like this:
currentObjectData: {
data_type: ""
}
As new components get created, additional key/value pairs are added to this object for future use. The data_type is a dropdown with selectable options for the user. My goal is to iterate through all instances of this object when a button is clicked, check for any empty data_type fields, and display a visual alert if found. If no empty fields exist, an event should be triggered. So far, I've attempted solutions like:
Object.values(this.currentObjectData).forEach(objectData => {
if (
!this.objectData.data_type||
this.objectData.data_type === ""
) {
this.$v.$touch();
} else {
EventBus.$emit("allObjectsAreValidated");
}
And also:
Object.values((this.currentObjectData).forEach(value => {
if (!value.includes("")) {
EventBus.$emit("allObjectsAreValidated");
}
});
However, I am experiencing issues where even if one object has a non-empty data_type, the event still triggers. Can anyone offer guidance on what I might be doing wrong and how I can achieve the desired outcome? Thank you in advance!
P.S. The data_type values are strings, and the workflow involves a parent component triggering this method. The idea is that if the method emits an event back, the form should be submitted.