Как правильно обновить значение для v-for prop в модальном классе начальной загрузки - PullRequest
Новая
       7

Как правильно обновить значение для v-for prop в модальном классе начальной загрузки

0 голосов
/ 27 января 2019

У меня есть этот код в моем родительском компоненте 

<div v-for="contestant in contestants" :key="contestant.id">
    <Evidence :contestant="contestant"></Evidence>
</div>

Затем в моем дочернем компоненте, как показано ниже 

<template>
<span @click="showModal(contestant)">View supporting evidence</span>
                         <!-- Evidence -->
                         <div class="modal fade" id="claimEvidence" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title text-primary" id="addNewLabel">Evidence to support {{username}}'s claim.</h5>
                                        <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>

                                    <div class="modal-body">
                                        <p>{{firstname}} {{lastname}}</p>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Close</button>
                                    </div>

                                </div>
                            </div>
                        </div>
</template>

 <script>
  export default {
    props: ['contestant'],
    data(){
      return{
          firstname: '',
          lastname: '',
          username: '',
       }
    },
    methods:{
       showModal(contestant){
          $('#claimEvidence').modal('show');
          this.username = contestant.user.username
          this.firstname = contestant.user.first_name
          this.lastname = contestant.user.last_name
      }
    }
  }

Проблема, с которой я сталкиваюсь, заключается в том, что я всегда получаюпервое значение итерации вместо циклического повторения в моем модальном классе начальной загрузки.Я предполагаю, что проблема с prop , потому что, когда я использую тот же самый модальный класс непосредственно в мой родительский компонент, он работает правильно .Я нашел этот выпуск , но я не мог понять, как.Пожалуйста, кто-нибудь может помочь мне понять, что я делаю не такЗаранее спасибо.

1 Ответ

0 голосов
/ 27 января 2019

Эта проблема ответила на вашу проблему в части "Отредактировано".

Исправьте ваш цикл, добавив динамические селекторы id: 

<div class="modal fade" id="`claimEvidence-${contestant.id}`" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
  ...
</div>

methods:{
   showModal(contestant){
      $('#claimEvidence-' + contestant.id).modal('show');
      //...
   }
}
...