如何在引导模态类中正确更新 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
      }
    }
  }

我

遇到的问题是我总是获得迭代的第一个值，而不是在我的引导模态类中循环遍历迭代。 我猜问题出在 prop 上，因为当我直接在父组件中使用相同的模态类时，它可以正常工作。我发现了这个类似的问题，但我无法弄清楚如何。请有人帮我弄清楚做错了什么。提前谢谢。

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');
      //...
   }
}