时间戳

首页 > 解决方案 > 如何在引导模式类中正确更新 v-for 道具的值

javascript - 如何在引导模式类中正确更新 v-for 道具的值

问题描述

我的父组件中有此代码

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

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

标签： javascriptloopsfor-loopvue.jsbootstrap-modal

解决方案

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

通过添加动态选择器来修复循环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');
      //...
   }
}

推荐阅读