Элемент привязки внутри a для l oop Vue не работает должным образом - PullRequest
Новая
       7

Элемент привязки внутри a для l oop Vue не работает должным образом

0 голосов
/ 03 апреля 2020

В следующем Vue компоненте я хочу l oop через dwarfs массив. И пока я нахожусь в текущем компоненте, все в порядке (TEST), а также все следующие свойства верны. 

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>

Но когда я связываю элемент dwarf с дочерним компонентом <app-modal/> изменяется на следующий dwarf в массиве dwarfs (TEST) - (Таким образом, в результате, когда я добавляю новое оружие в модальной форме, оно добавляется ко второму дварфу ...) : 

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>

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Похоже, у вас есть <app-modal/> компонент внутри v-for="dwarf in dwarfs" l oop, но тогда элемент управления для отображения всех модальных компонентов, созданных этим l oop, находится только в одной переменной: showModal. Поэтому, когда showModal равно true, модал покажет каждого из гномов, и я предполагаю, что модал второго гнома просто прикрывает первый.

Чтобы это исправить, вы можете переместить <app-modal /> за пределами этого v-for l oop, так что на странице есть только один экземпляр, а затем как часть лога c, который показывает модал, заполните реквизиты модала правильной информацией дварфа.

Примерно так: 

    <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() {
      //...
    }
  },
}

Затем вы можете получить правильные данные карлика в модале, от идентификатора, переданного в качестве пропила, или передать более детализированные данные модалу. поэтому он более «тупой», что является лучшей практикой, чтобы компонент не зависел от конкретной структуры данных c. Надеюсь, что это поможет

0 голосов
/ 03 апреля 2020

Предоставлено ответом @Joe Dalton, в моем случае это чередуется: 

      <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>
...