1
私はvue jsが新しく、より多くのデータを表示するためにブートストラップモーダルで使用しようとしています。私のシナリオは、複数のレコードを持つテーブルと、ブートストラップモーダルでクリックされたレコードの深さの詳細を表示するボタンです。最初のボタンをクリックすると、キャッシュされ、異なる詳細の別のボタンを選択している間は更新されません。ブーストモードがvue js v2と双方向バインディングで更新されない
誰かが間違っているのを見ていますか？
（それはLaravel、jQueryとVueJSの組み合わせです）
HTML表：
<table class="table table-striped">
<thead>
<tr>
<th>E-mail address</th>
<th>Status</th>
<th>Sent at</th>
<th>Expires in</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="v-align-middle">
[email protected]
</td>
<td class="v-align-middle">
<span class="label label-default">
pending
</span>
</td>
<td class="v-align-middle">
2017-06-05 17:59:15
</td>
<td class="v-align-middle">
29 days
</td>
<td>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#inviteDetailsModal" data-email="[email protected]">
<i class="fa fa-eye"></i>
</a>
</div>
</td>
</tr>
<tr>
<td class="v-align-middle">
[email protected]
</td>
<td class="v-align-middle">
<span class="label label-default">
pending
</span>
</td>
<td class="v-align-middle">
2017-06-05 13:27:25
</td>
<td class="v-align-middle">
29 days
</td>
<td>
<div class="btn-group pull-right">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#inviteDetailsModal" data-email="[email protected]">
<i class="fa fa-eye"></i>
</a>
</div>
</td>
</tr>
</tbody>
はJavaScript：
$('[data-target="#inviteDetailsModal"]').on('click', function() {
let email = $(this).data('email'),
baseUrl = $('html').data('base');
Vue.component('invite-details', {
data: function() {
return {
email: null,
token: null,
logs: [],
expires: null
}
},
methods: {
update: function (data) {
this.email = data['email'];
this.token = data['token'];
this.logs = data['logs'];
this.expires = data['expires'];
},
fetchData: function() {
this.$http.get(baseUrl + '/system/invites/' + email + '/details')
.then(response => {
this.update(response.body);
}, response => {
console.log('whoops something went wrong');
});
}
},
mounted: function() {
this.$el.addEventListener('shown.bs.modal', this.fetchData());
},
beforeDestroy: function() {
this.$el.removeEventListener('shown.bs.modal', this.fetchData());
}
});
new Vue({
el: '#inviteDetailsModal'
});
});
ブートストラップモーダル：
<div class="modal fade slide-up" id="inviteDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content-wrapper">
<invite-details inline-template>
<div class="modal-content" id="details">
<div class="modal-header clearfix text-left">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h5>
Invite details for <span class="semi-bold">@{{ email }}</span>
</h5>
<p class="p-b-10">
<span data-tooltip="true" data-placement="bottom" title="token">
<em>@{{ token }}</em>
</span>
</p>
</div>
<div class="modal-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Sent at</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="log in logs">
<td>@{{ log.number }}</td>
<td>@{{ log.sentAt }}</td>
<td>@{{ log.status }}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer text-center">
<span class="hint-text">
<em>expires in <strong>@{{ expires }}</strong> days</em>
</span>
</div>
</div>
</invite-details>
</div>
</div>
私はあなたが1つのモーダルコンポーネントを使用していて、クリックされたテーブルの特定のボタンに基づいてコンテンツを変更しようとしていますか？その場合、 'mounted'フックは、コンポーネントが最初にマウントされたときに1回だけ起動します。 – thanksd
これは正しいので、テーブル内でクリックされた特定のボタンに基づいてモーダルコンテンツを更新するにはどうすればよいですか？何か提案はありますか？ – jaimyborgman