[Vuejs]-Vuejs Component Not Rendering though registered

by

0👍

<span v-if="hero in chosen-heroes.chosenHeroes">✔ &nbsp;</span>

Here is the chosen referenced during render but not defined on the instance.
I guess you want to check if this particular hero is part of this list

data() {
return {
  heroes: [
    { name: "Superman" },
    { name: "Batman" },
    { name: "Aquaman" },
    { name: "Wonder Woman" },
    { name: "Green Lantern" },
    { name: "Martian Manhunter" },
    { name: "Flash" }
  ],
  newName: "",
  isEdit: false,
  heroToModify: null
}

You can write any javascript expression in the v-if so you can try:

<span v-if="heroes.map(heroObject => heroObject.name).includes(hero.name)">✔ &nbsp;</span>

I used the Array.map() function here so you can keep your list with objects. You could remove it if you write directly the names in the array.

EDIT:
The best would probably be to use a computed property here to make it more reusable and take this long expression out of the v-if:

isInList(heroName) {
  return this.heroes.map(heroObject => heroObject.name).includes(heroName);
}

then

<span v-if="isInList(hero.name)">✔ &nbsp;</span>

Leave a comment