how to use 'includes' correctly in vue

Question

I want to show an error message if object in an array has the string FAILED . My array looks like this:

And my code to check if one object has state: "FAILED" looks like this:

hasFailedTask() {
  console.log(this.model.status.tasks);
  return this.model.status.tasks.state.includes('FAILED');
},

but then I always get the following error message in my console:

vue.runtime.esm.js:587 [Vue warn]: Error in render: "TypeError: Cannot read property 'includes' of undefined"

Does anyone know the problem and could support me?

Thank you in advance!

Answer 1

You could use find method since this.model.status.tasks is an array:

hasFailedTask() {
 
  return  this.model.status.tasks.find(task=>task.state.includes('FAILED'));
},

Answer 2

your function should look like this:

hasFailedTask() {
  //console.log(this.model.status.tasks);
  return this.model.status.tasks.some(({state}) => state === "FAILED")
},

Answer 3

You can also use flatMap to allow an includes check:

hasFailedTask() {
    return this.model.status.tasks.flatMap(t => t.state).includes('FAILED');
}