在表中使用引导模式答案

【问题标题】：using bootstrap modal in a Table在表中使用引导模式
【发布时间】：2019-11-19 21:09:51
【问题描述】：

我正在使用 Bootstrap 模式来更改表格中每个单元格的值。我没有做的是，一旦模态打开，我想在模态内部有一个按钮，可以打开相同的模态但用于不同的单元格，而不是关闭模态并再次打开它。任何想法家伙..这有点adavnce，所以我会感谢任何线索。

我正在尝试使用 data-id 给每个 id 一个 id，因为这是点击事件来改变单元格数据的地方。

data-id="cursist.ID"

    <td><i class="fal fa-user fa-2x"></i></td>
    <td>{{ cursist.firstname }} {{ cursist.lastname }}</td>

    <td data-toggle="modal" 
    data-target="#exampleModalCenter" 
    class="text-center" 
    v-for="x in lessen"
     data-id="cursist.ID" 
     v-on:click="changeParticipatie(x, cursist)">

    </td>
    <div class="modal fade" 
    id="exampleModalCenter" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="exampleModalCenterTitle" 
    aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">header modal</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                </div>

            </div>
     <div class="modal-footer  ">
    <i :class="icons.ARROW_LEFT"></i> <!-- right arrow to to next row-->
  <i data-dismiss="modal"  :class="icons.ARROW_RIGHT" ></i><!-- left arrow 
   to go to prev row-->
            </div>
        </div>
    </div>
</tr>

我认为一旦单击右箭头按钮以查找表格行的下一个值，我需要以某种方式告诉模态框。

【问题讨论】：

标签： javascript html vue.js bootstrap-4 bootstrap-modal

【解决方案1】：

诀窍是对每个 td 标签使用“v-bind:id = 'uniqueid'”，就像这样，我们可以在 v-for 循环中识别给定列的每一行。然后使用一点 jQuery 来触发每个单元格。像这样：

const button = document.getElementById(id); 
button.click(); 
$("#exampleModalCenter").modal("show");

【讨论】：