如何将数据传递给一个vuestrap莫代尔成分(How to Pass Data to a vues

我试着去一些表格数据传递到其子vuestrap模态分量。该模式将被所有运输署在复选框被调用的模式被重用。

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

当点击复选框。正如你可以看到表中的每一行都有一个复选框，以便将数据传递到模态将是唯一的其行。作为进出口新的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)
})

相关数据传递到模态，但Vuestrap

Answer 1:

您可以使用v-for="slide in slides" 。所以每tr可以得到幻灯片对象之一。然后，你可以把它作为一个道具模式的。

不需要额外的Ajax请求。

Answer 2:

我管理与Ajax请求取决于标识点击来解决它。