Question

我试图将一些表数据传递给它的子vuestrap Modal组件。模式将被复选框调用模态的所有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

我设法使用ajax请求解决它，具体取决于所点击的ID。

Answer 2

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

不需要额外的ajax请求。

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

2 个答案: