如何将数据传递给 vuestrap 模态组件

Question

我试图将一些表数据传递给它的子 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>

当复选框被点击时。如您所见，表格中的每一行都有一个复选框，因此要传递给 Modal 的数据对其行是唯一的。 作为 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

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

不需要额外的 ajax 请求。

Answer 2

我设法根据点击的 Id 使用 ajax 请求来解决它。