How to send two or more parameters to component vue.js? (vue.js 2)

Question

My view is like this :

<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 component vue.js (DeleteMessageModal.vue) is 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 I click delete button, it will send value of message id to DeleteMessageModal component

I do : console.log(message_id), it success display value of message id

But here, I need another parameters too

The messages array on the view, besides id key, that there are seller_id key and buyer_id key

I want to send buyer_id key and seller_id key also to components vue

How can I do it?

UPDATE

My solution :

My view is like this :

<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

My component vue.js (DeleteMessageModal.vue) is 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:['messageData'],
        methods: {
            deleteMessage(event) {
                var messageData = this.messageData           
                var arr = messageData.split('#separator#')
                message_id= arr[0]
                seller_id= arr[1]
                buyer_id= arr[2]
            }
        } 
    }
</script>

Why don't you add them to the props of the component and pass it in the parent's view the same say as the messageId? — GMaiolo, Mar 13 '17 at 04:56
@Goliadkin, I know it. But, my problem is : how can I get value from $messages array? So, when the delete button clicked, I get value of buyer_id and seller_id — moses toh, Mar 13 '17 at 05:17

score 2 · Answer 1 · answered Mar 13 '17 at 05:07

2

As added in comment, you can add in props:

<script>
    export default{
        name: 'DeleteMessageModal',
        props:['messageId', 'buyerId', `sellerId `],
        methods: {
            deleteMessage(event) {
                var message_id = this.messageId
                console.log(message_id)
                ...
            }
        } 
    }
</script>

and pass it in the parent template:

<delete-message-modal id="modal-delete-message" :message-id="idModal" buyer-id="123" seller-id="32"></delete-message-modal>

answered Mar 13 '17 at 05:07

Saurabh

71,488
40
181
244

I know it. But, my problem is : how can I get value from $messages array? So, when the delete button clicked, I get value of buyer_id and seller_id – moses toh Mar 13 '17 at 05:16
@mosestoh One option can be to pass that as well as a prop or you can start thinking of using some centralised state machine as well or vuex for that matter, you can check my similar answer [here](http://stackoverflow.com/a/40943682/1610034). – Saurabh Mar 13 '17 at 05:30
@mosestoh Pass the values you want to `modalShow` function, inside of it set some variables that will be binding to `DeleteMessageModal` props .... and finish this one. – Jonatas Walker Mar 13 '17 at 10:58
@Jonatas Walker, I'm still confused. You better give answer with more detailed – moses toh Mar 13 '17 at 12:36
@Saurabh, I'm still confused. The actual core of my problem is how can I get some value from $messages array – moses toh Mar 13 '17 at 12:38
@mosestoh what problem are you facing in passing ` $messages`, is it because it is a laravel variable. – Saurabh Mar 13 '17 at 12:59
@Saurabh, See my question. I had update it. It's my solution. What do you think? – moses toh Mar 14 '17 at 07:13
@mosestoh What is `idModal`, if that is your messageData, than yes, this looks fine. – Saurabh Mar 14 '17 at 07:15
@Saurabh, Yes. In fact it's better to use your way. But the problem was not able to get buyer_id and seller_id – moses toh Mar 14 '17 at 07:21

How to send two or more parameters to component vue.js? (vue.js 2)

1 Answers1