jeudi 15 octobre 2015

How to Pass Data to a vuestrap Modal component

Im trying to pass some table data to its child vuestrap Modal component

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

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: ''
            }
 },

Should I use some kind of method for when the user clicks on the checkbox to pass the data to the modal?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire