<template>
  <div>
    <!-- justice leage application begins here -->
    <h1 id="jl">Justice League Mission Planner</h1>

    <ul class="roster">
      <h3>Roster:</h3>
      <li v-for="hero in heroes"
          :key="hero.name">

        <!-- to do: conditionally display this span -->
        <span v-if="isInList(hero.name)">✔ &nbsp;</span>

        <span>{{ hero.name }}&nbsp;</span>
        <span class="edit"
              @click="editHero(hero)">edit</span>
      </li>
      <br>
      <input type="text"
             placeholder="new name"
             v-model="newName"
             v-if="isEdit"
             @keyup.enter="changeName"
             @blur="clear">
      <br>
      <span v-if="isEdit">enter to submit, click outside the box to cancel</span>
    </ul>
    <chosen-heroes :heroes="heroes" :chosenHeroes="chosenHeroes" @add-hero="addHero" />
  </div>
</template>

<script>
import ChosenHeroes from "./components/ChosenHeroes.vue";

export default {
  components: {
   "chosen-heroes" : ChosenHeroes
  },
  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,
      chosenHeroes: ChosenHeroes.data
    };

methods: {
    editHero(hero) {
      this.isEdit = true;
      this.newName = hero.name;
      this.heroToModify = hero;
    },

    changeName() {
      this.heroToModify.name = this.newName;
      this.isEdit = false;
    },

    clear() {
      this.heroToModify = null;
      this.newName = "";
      this.isEdit = false;
    },

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


...
<template>
  <div>
    <select v-model="chosenHero">
      <!-- placeholder value -->
      <option :value="null">Select a hero</option>

      <!-- available heroes -->
      <option v-for="hero in heroes"
              :key="hero.name"
              :value="hero.name">
        {{ hero.name }}
      </option>
    </select>
    <span>&nbsp;</span>
    <button @click="addHero(chosenHero)"
            :disabled="chosenHero === null || chosenHeroes.length >= 3">Add Hero</button>
    <br>
    <h3>Chosen Heroes</h3>
    <div class="chosen-heroes">
      <div v-for="(hero, i) in chosenHeroes"
           :key="hero.name">
        <strong>Slot {{ i + 1 }}:</strong>
        <Hero :hero="hero"
              @removeHero="removeHero(hero)" />
      </div>
    </div>
  </div>
</template>

<script>
import Hero from "./Hero";

export default {
  components: {
    Hero
  },
  props: {
    "heroes": Array
  },
  data() {
    return {
      chosenHero: null,
      chosenHeroes: []
    };
  },
  methods: {
    addHero(name) {
      if(this.chosenHeroes.length < 3) {
        this.chosenHeroes.push({ name });
        this.chosenHero = null;
      }
      this.$emit("add-hero",this.chosenHeroes);
    },

    removeHero(hero) {
      this.chosenHeroes = this.chosenHeroes.filter(h => h.name != hero.name);
    }
  }
};
</script>

<style scoped>
.chosen-heroes {
  display: flex;
  flex-flow: column;
  align-items: center;
}
</style>