с помощью начальной загрузки в таблице - PullRequest
Новая
       37

с помощью начальной загрузки в таблице

0 голосов
/ 10 июля 2019

Я использую модальный Bootstrap для изменения значения каждой ячейки в таблице. Что я не могу сделать, так это как только модал открыт, я хочу, чтобы внутри модала была кнопка, которая открывает тот же модал, но для другой ячейки, вместо того, чтобы закрывать модал и открывать его снова. Любая идея, ребята ... это немного приключений, поэтому я буду благодарен за любые подсказки.

Я пытаюсь использовать 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>

Я думаю, что как-то мне нужно сообщить модальное значение, как только нажата кнопка со стрелкой вправо, чтобы найти следующее значение строки таблицы.

1 Ответ

0 голосов
/ 16 июля 2019

Хитрость заключалась в том, чтобы использовать «v-bind: id = 'uniqueid'» для каждого тега td, например, мы можем идентифицировать каждую строку данного столбца в цикле v-for.затем использовать немного jQuery для запуска каждой ячейки.как это: 

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