VueJS - Injecting data to Modal component from other one

Hi I have a problem with VueJS Modal component. I want to inject data taken from my main app.js to the modal component based on which element of list im clicking but dont know how to do that.

Is there any option to bind the data via methods (function) in modal.vue?

like function(header, body) {
   this.header = header;
   this.body = body;
}

Or dynamicaly props smth like that?

Vue.component('monitorservice', require('./components/Service.vue'));
Vue.component('modal', require('./components/Modal.vue'));

const app = new Vue({
    el: '#app',

    data: {
        monitorings: [
            {
                sm_label: "test1",
                sm_message: "test1",
            },
            {
                sm_label: "test2",
                sm_message: "test2",
            }
        ],

        showModal: false,
    }

});

modal.vue

<template>
  <div name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <div class="header">
              <slot name="header"></slot>
            </div>
          </div>

          <div class="modal-body">
            <slot name="body"></slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">Zamknij</button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
        data() {
            {
                return {
                    monitoring: {
                        label: "Tytul",
                        body: "Tresc"
                    }
                }
            }

        },

    }

</script>

monitor.vue

<template>
    <div class="monitorservice">

        <div class="grid-item ui-draggable ui-draggable-handle" style="position: absolute; left: 0px; top: 0px;">
            <div class="label">
                <div class="options"></div>
                Monitoring usług - <span class="sublabel" id="monitor1time"></span></div>
            <div class="content">
                <table class="state-list" id="monitor1">
                    <tbody>
                    <tr>
                        <td></td>
                        <td class="state" style="width: 80px;"></td>
                    </tr>
                    <div v-for="monitoring in monitorings" :monitorings="monitorings">

                        <tr>
                            <td></td>
                            <td class="state state-error">ERROR</td>


                        </tr>
                    </div>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },

        props:['monitorings'],

        methods: {
        }
    }
</script>

main.blade.php

    <div id="app">
        <monitorservice :monitorings="monitorings">
        </monitorservice>

    <div class="container">
        <button id="show-modal" @click="showModal = true">Modal</button>
    </div>

        <modal v-if="showModal" @close="showModal = false"></modal>

    </div>

    <script src="js/app.js"></script>

How to make that?

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2vvZ0eo
via IFTTT