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>

Joe Dalton · Accepted Answer · 2020-04-03 19:48:51Z

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

answered Apr 3, 2020 at 19:48

Joe Dalton

3462 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Heisenberg Over a year ago

thanks a lot! you were right with "covering up" the both modals were there above each other. As I did not had any dwarfId in my very small web api, i alternated your answer a bit.

Joe Dalton Over a year ago

@Mori Awesome! Glad it helped. And approach looks great for what the data is

Heisenberg · Accepted Answer · 2020-04-03 20:51:40Z

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>

Collectives™ on Stack Overflow

Bind element inside a for loop Vue not working properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related