如何将数据传递到Vuestrap模式组件 [英] How to Pass Data to a vuestrap Modal component

问题描述

我正在尝试将一些表数据传递到其子vuestrap Modal组件.该模式将被复选框调用该模式的所有Td重用.

Im trying to pass some table data to its child vuestrap Modal component. The modal will be reused by all the Td's where the checkbox is calling the modal.

<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的新手，除了Im试图使用Vuestrap来不重塑事物之外， 我不知道在弹出时如何将这些数据提供给模态.

when the checkbox is clicked. As you can see every row in the table has one checkbox so the data to be passed to the Modal will be unique to its row. As Im new to Vue, besides Im trying to use Vuestrap to not reinvent things, I dont know how to give that Data to the Modal when it pops.

   new Vue({

        el:'#ordertbl',

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

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

基本上我想执行以下操作

Basically I want to do the following

$('#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将相关数据传递到Modal

Pass the related data to the Modal, but with Vuestrap

推荐答案

您可以使用v-for="slide in slides".因此，每个tr都可以获取幻灯片对象之一.然后，您可以将其作为模态的道具传递.

You can use v-for="slide in slides". So every tr can get one of the slide object. Then you can pass it as a props to modal.

不需要额外的ajax请求.

Extra ajax request is not required.

这篇关于如何将数据传递到Vuestrap模式组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！