如何将数据传递给 vuestrap Modal 组件

Question

我正在尝试将一些 table 数据传递给它的子 vuestrap 模态组件。模态将被复选框调用模态的所有 Td 重用。

<div id="ordertbl" class="table-responsive">
<table  class="table table-striped">
<thead>
<tr>
 ...
</tr>
</thead>
<tbody>
<tr v-repeat="slides">
<td>@{ {NAME}}</td>
<td>@{ {MESSAGE}}</td>
<td> <input type="checkbox"  v-on="click:showMod = true" v-model="published" > </td>
</tr>
</tbody>
</table>
<modal title="Modal" show="@{{@showMod}}" effect="fade" width="400">
 <div class="modal-body">You will publish NAME, MESSAGE</div>
 </modal>
 </div>

当复选框被选中时。如您所见，table 中的每一行都有一个复选框，因此要传递给模态框的数据对其行来说是唯一的。作为 Vue 的新手，除了我尝试使用 Vuestrap 而不是重新发明东西之外，我不知道如何在弹出时将该数据提供给模态框。

   new Vue({

        el:'#ordertbl',

        components: {
            'modal':VueStrap.modal
        },

        data: {
            showMod: false,
            sortKey: '',
            reverse:false,
            slides: {
                id: '',
                name: '',
                message: '',
                published: ''
            }
 },

基本上我想做以下事情

$('#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
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

将相关数据传递给Modal，但使用Vuestrap

Answer 1

我设法通过 ajax 请求解决了这个问题，具体取决于点击的 ID。

Answer 2

您可以使用 v-for="slide in slides"。这样每 tr 就可以获得其中一个幻灯片对象。然后你可以将它作为道具传递给模态。

不需要额外的 ajax 请求。

如何将数据传递给 vuestrap Modal 组件

How to Pass Data to a vuestrap Modal component

vue.js

laravel-5.1