单击返回错误数据的表行

Question

感谢您花时间查看我的问题。

我有一个视图通过控制器从我的数据库返回数据：

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

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

我对这个观点很满意： enter image description here

我通过 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>

当我单击单个表格行时，问题就来了。我希望它在单个表格行中显示与信息相关的数据。在下面的图片中，我点击了第一行（我自己的名字），然后出现了这个： wrong data display

您可能会看到它显示最后一行的信息，并且每次我单击一行时都会显示。当我进一步向下分页时，同样的问题。

我已经检查过我是否将数据传递给了视图，我做到了： data passed to view

我的 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

不能准确地告诉 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;

Answer 2

根据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-* 属性，你不需要其他任何东西来关闭模态。