單擊表行返回錯誤的數據

Question

感謝您抽出寶貴的時間來研究我的問題。

我有一個視圖，該數據從我的數據庫返回通過控制器的數據：

public function index()
    {
        $members = Member::orderBy('id', 'desc')->paginate(5);

        return view('home', compact('members'));
    }

我對此觀點感到滿意： 在此處輸入圖片描述

我通過一個foreach循環將其傳遞給視圖：

 @foreach ($members as $member)

 @include('partials.tableRow')

 @endforeach

我的tableRow看起來像這樣：

<a class="panel-block" onclick="refs.show.open()">
  <span class="panel-icon">
    <i class="fas fa-user" aria-hidden="true"></i>
  </span>
  <span class="column is-4">
    {{ $member->name }}
  </span>
  <span class="panel-icon">
    <i class="fas fa-at" aria-hidden="true"></i>
  </span>
  <span class="column is-5">
    {{ $member->email }}
  </span>
  <span class="panel-icon">
    <i class="fas fa-tshirt" aria-hidden="true"></i>
  </span>
  <span class="panel-button column is-1">
    {{ $member->size }}
  </span>
  <span class="panel-icon">
    <i class="fas fa-coins" aria-hidden="true"></i>
  </span>
  <span class="panel-button column is-2">
    {{ $member->points}}
  </span>
</a>

當我單擊單個表格行時出現問題。 我希望它在各個表行上顯示與信息相關的數據。 在下面的圖片中，我單擊了第一行（我自己的名字），然后顯示 ： 錯誤的數據顯示

您可能會看到，它顯示的是最后一行的信息，並且每次我單擊一行時都會這樣做。 當我深入分頁時，同樣的問題。

我已經檢查過是否將數據傳遞給視圖，並且我做了：將數據傳遞給視圖

我的showMember模態如下所示：

<div class="modal" id="show">
  <div class="modal-background" onclick="refs.show.close()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">{{ $member->name }}</p>
      <button class="delete" onclick="refs.show.close()" aria-label="close"></button>
    </header>
      <section class="modal-card-body">

        <!-- Content -->
        <li class="panel-block">
          <label class="column is-2"><b>E-mail</b></label>{{ $member->email }}
        </li>

        <li class="panel-block">
          <label class="column is-2"><b>T-shirt</b></label>{{ $member->size }}
        </li>

        <li class="panel-block">
          <label class="column is-2"><b>Points</b></label>{{ $member->points }}
        </li>
        <!-- Content -->

      </section>
      <footer class="modal-card-foot">
        <button class="button is-outline" onclick="refs.show.close()">Luk</button>
      </footer>

  </div>
</div>

我可能會缺少指向id的鏈接或某些東西，以便將特定數據傳遞給模態，或者javascript函數是否無法獲取除最后一個傳遞的數據之外的問題？

先感謝您

Answer 1

根據Boostrap 4.1文檔，您需要在單擊后傳遞變量。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

然后在您的js中：

   $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') 
// Extract info from data-* attributes

  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

數據源是data- *屬性，您無需其他任何操作即可關閉模式。

Answer 2

不能確切地說出laravel，但是在（Yii2，Symfony）中執行了返回的視圖，並導致了死亡。 您只能使用javascript動態更改模態的內容，這將通過AJAX加載數據或從隱藏元素獲取並加載到模態。

請顯示您的refs.show.open（）。

2018年8月13日更新

因此，您可以在顯示模式之前執行類似的操作。

document.getElementById('modal-email').innerText = this.getElementsByClassName('member-email').item(0).innerText;
document.getElementById('modal-size').innerText = this.getElementsByClassName('member-size').item(0).innerText;
document.getElementById('modal-points').innerText = this.getElementsByClassName('member-points').item(0).innerText;