Bind element inside a for loop Vue not working properly

Question

In the following Vue Component I want to loop through dwarfs array. And as long as I am in the current component, everything is fine (TEST) and also all the following properties are correct.

Currenct_Component.vue :

<template>
  <div>
    <h2>Stamm: {{ tribeName }}</h2>
    <div class="card-container">
      <div class="card" style="width: 18rem;" v-for="dwarf in dwarfs" :key="dwarf.name">

        <!--   TEST     -->
        <p>{{dwarf}}</p>

        <!-- CHILD COMPONENT -->
        <app-modal
          :showModal="showModal"
          :targetDwarf="dwarf"
          @close="showModal = false"
          @weaponAdded="notifyApp"
        />
        <!--      <img class="card-img-top" src="" alt="Card image cap">-->
        <div class="card-body">
          <h3 class="card-title" ref="dwarfName">{{ dwarf.name }}</h3>
          <hr>
          <ul class="dwarf-details">
            <li><strong>Alter:</strong> {{ dwarf.age }}</li>
            <li><strong>Waffen:</strong>
              <ul v-for="weapon in dwarf.weapons">
                <li><span>Name: {{ weapon.name }} | Magischer Wert: {{ weapon.magicValue }}</span></li>
              </ul>
            </li>
            <li><strong>Powerfactor:</strong> {{ dwarf.weapons.map(weapon => weapon.magicValue).reduce((accumulator, currentValue) => accumulator + currentValue) }}</li>
          </ul>
          <button class="card-button" @click="showModal = true"><span class="plus-sign">&#43;</span> Waffe</button>
        </div>
      </div>
    </div>
    <button id="backBtn" @click="onClick">Zurück</button>
  </div>
</template>

<script>
  import Modal from './NewWeaponModal.vue';
  export default {
    data() {
      return {
        showModal: false,
      }
    },
    components: { appModal : Modal },
    props: ['tribeName', 'dwarfs'],
    methods: {
      onClick() {
        this.$emit('backBtn')
      },

      notifyApp() {
        this.showModal = false;
        this.$emit('weaponAdded');
      }
    },
  }
</script>

But when I bind the element dwarf to the Child Component <app-modal/> it changes to the next dwarf in the array dwarfs (TEST) - (So as the result when i add a new weapon in the modal-form it gets added to the second dwarf...):

Child_Component.vue :

<template>
  <div>
    <div class="myModal" v-show="showModal">
      <div class="modal-content">
        <span @click="$emit('close')" class="close">&times;</span>
        <h3>Neue Waffe</h3>

        <!--    TEST    -->
        <p>{{ targetDwarf }}</p>


        <form>
          <input
            type="text"
            placeholder="Name..."
            v-model="weaponName"
            required
          />
          <input
            type="number"
            placeholder="Magischer Wert..."
            v-model="magicValue"
            required
          />
          <button @click.prevent="onClick">bestätigen</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        weaponName: '',
        magicValue: '',
      }
    },

    props: ['showModal', 'targetDwarf'],

    methods: {
      onClick() {
        if(this.weaponName !== '' &&
          Number.isInteger(+this.magicValue)) {
          let newData = {...this.dwarf};
          newData['weapons'] = [
            ...this.dwarf['weapons'],
            {
              "name": this.weaponName,
              "magicValue": Number.parseInt(this.magicValue)
            },
          ];

          this.$http.post("https://localhost:5019/api", newData)
            .then(data => data.text())
            .then(text => console.log(text))
            .catch(err => console.log(err));

          this.$emit('weaponAdded');
        } else {
          alert('You should fill all fields validly')
        }
      },
    }
  }
</script>

Answer 1

Courtesy of @Joe Dalton's answer, a bit alternated for my case:

      <div class="card" style="width: 18rem;" v-for="dwarf in dwarfs" :key="dwarf.name">
      ...
      <button class="card-button" @click="setModalDwarf(dwarf)"><span class="plus-sign">&#43;</span> Waffe</button>
      <div>

      <app-modal
        :showModal="showModal"
        :targetDwarf="currentDwarf"
        @close="showModal = false"
        @weaponAdded="notifyApp"
      />

<script>
  import Modal from './NewWeaponModal.vue';
  export default {
    data() {
      return {
        showModal: false,
        currentDwarf: null,
      }
    },
    components: { appModal : Modal },
    props: ['tribeName', 'dwarfs'],
    methods: {
      setModalDwarf(dwarf) {
        this.currentDwarf = dwarf;
        this.showModal = true;
      },

      ...
  }
</script>

Answer 2

It looks like you have the <app-modal/> component inside of the v-for="dwarf in dwarfs" loop, but then the control for showing all of the modal components created by that loop is just in one variable: showModal. So when showModal is true, the modal will show each of the dwarfs, and I'm guessing the second dwarf's modal is just covering up the first one's.

To fix this, you could move the <app-modal /> outside of that v-for loop, so there's only one instance on the page, then as part of the logic that shows the modal, populate the props of the modal with the correct dwarf's info.

Something like this:

    <div class="card-container">
      <div class="card" v-for="dwarf in dwarfs" :key="dwarf.name">

        <p>{{dwarf}}</p>

        <div class="card-body">
          <button
            class="card-button"
            @click="() => setModalDwarf(dwarf)"
          >
            Waffe
          </button>
        </div>
      </div>


      <!-- Move outside of v-for loop -->
      <app-modal
        :showModal="!!modalDwarfId"
        :targetDwarf="modalDwarfId"
        @close="modalDwarfId = null"
        @weaponAdded="onDwarfWeaponAdd"
      />
    </div>

export default {
//....
  data: () => ({
    modalDwarfId: null,
  )},

  methods: {
    setModalDwarf(dwarf) {
      this.modalDwarfId = drawf.id;
    },
    onDwarfWeaponAdd() {
      //...
    }
  },
}

You could then grab the correct dwarf data within the modal, from the ID passed as a prop, or pass in more granular data to the modal so it's more "dumb", which is the better practice so that the component isn't dependent on a specific data structure. Hope that helps