如何在引導模態類中正確更新v-for prop的值

Question

我的父組件中有此代碼

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

遇到的問題是， 總是獲得迭代的第一個值，而不是在我的引導程序模式類中循環遍歷迭代。 我猜測問題出在道具上， 因為當我直接在父組件中使用相同的模態類時，它可以正常工作 。 我發現了類似的問題，但我不知道如何解決。 請有人可以幫助我找出問題所在。 提前致謝。

Answer 1

這個問題在“編輯”部分回答了你的問題。

通過添加動態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');
      //...
   }
}