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 ，因为当我直接在父组件中使用相同的模式类时，它可以正常工作。我发现了类似的 issue ，但我不知道如何做到。请有人可以帮助我找出问题所在。预先感谢。

Answer 1

此issue在“已编辑”部分回答了您的问题。

通过添加动态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');
      //...
   }
}

如何在引导模态类中正确更新v-for prop的值

1 个答案: