Here is how I have structured my view:
<table class="table table-inbox">
...
<tbody>
@foreach($messages as $message)
<tr>
...
<td>
<div class="btn-group" role="group" aria-label="...">
...
<a href="javascript:" @click="modalShow('modal-delete-message','{{ $message->id }}')" class="btn btn-danger">
<span class="fa fa-trash"></span> Delete
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
@section('modal')
<delete-message-modal id="modal-delete-message" :message-id="idModal"></delete-message-modal>
@endsection
My vue.js component (DeleteMessageModal.vue) looks like this:
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
</template>
<script>
export default{
name: 'DeleteMessageModal',
props:['messageId'],
methods: {
deleteMessage(event) {
var message_id = this.messageId
console.log(message_id)
...
}
}
}
</script>
When the delete button is clicked, it sends the message ID to the DeleteMessageModal component.
I successfully display the value of the message ID using console.log(message_id).
Now, I also need to send additional parameters. In addition to the ID key in the messages array on the view, there are seller_id and buyer_id keys.
I want to send these keys to the vue components as well. How can I achieve this?
UPDATE
My updated solution :
This is how I modified my view:
<table class="table table-inbox">
...
<tbody>
@foreach($messages as $message)
<tr>
...
<td>
<div class="btn-group" role="group" aria-label="...">
...
<a href="javascript:" @click="modalShow('modal-delete-message','{{ $message->id }}#separator#{{$message->seller_id}}#separator#{{$message->buyer_id}}')" class="btn btn-danger">
<span class="fa fa-trash"></span> Delete
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
@section('modal')
<delete-message-modal id="modal-delete-message" :message-data="idModal"></delete-message-modal>
@endsection
The Vue.js component (DeleteMessageModal.vue) has been updated accordingly:
<template>
<div class="modal" tabindex="-1" role="dialog">
...