Advanced usage in Vue
Become a real Komposer by mastering the usage in Vue 🧐

Using in Vue

For more complex interactions, the komposers can be used internally in Vue too. They emit useful events which can caught and handled in your custom methods.

Form example

To display a form inside one of your Vue components, you may pass it as a prop and use it in Vue.

<!-- In your blade template -->
<my-vue-component :form="{{ new App\Http\Komposers\MyForm() }}"></my-vue-component>
<!-- MyVueComponent.vue -->
<template>
   <vl-form :vkompo="form" @success="success"></vl-form>
</template>

<script>
export default {
   props: ['form'],
   methods: {
     success(response){
       console.log(response)
     }
   }
}
</script>

Query example

TODO: CREATE AN ACTIVATE TABLE ROW EXAMPLE

To display the query or table inside one of your Vue components, you may pass it as a prop and use it in Vue.

<!-- In your blade template -->
<my-vue-component :query="{{ new App\Http\Komposers\MyCatalog() }}"></my-vue-component>
<!-- MyVueComponent.vue -->
<template>
   <vl-query :vkompo="query" @event="handleEvent"></vl-query>
</template>

<script>
export default {
   props: ['query'],
   methods: {
     handleEvent(payLoad){
       `console`.log(payLoad)
     }
   }
}
</script>

Emitting events

On Submit event

You might not want the form to submit to the backend at all, but rather to simply emit an event to it's parent vue component for example. To do so, you can set the property `emitFormData` in your Form class:

public $emitFormData = true;

The emitted response can be captured with the event handler `@submit` or `v-on:submit` in the parent vue component:

<template>
    <vl-form :vkompo="vkompo" @submit="performAction"></vl-form>
</template>

<script>
export default {
    props: ['vkompo'],
    methods: {
        performAction(formData) {
            console.log(formData)
        }
    }
}
</script>

On Success / on Error events

If a successful response is received from the server, the form will emit a `success` event that could be listened to from it's parent component. The event will receive the server's response object as the parameter:

<template>
    <vl-form :vkompo="vkompo" @success="performAction"></vl-form>
</template>

<script>
export default {
    props: ['vkompo'],
    methods: {
        performAction(response) {
            console.log(response)
        }
    }
}
</script>