Laravel & VueJS: Call VueJS Method Inside Blade

Question

I've been looking for solutions and references to my problems. I am confused to call a vue method (ex: createItem() {...}) that is inside the VueJs component via an external button.

Here my "app.js"

// ..\resources\assets\js\app.js
require('./bootstrap');

window.Vue = require('vue');
window.Vue.prototype.$http = axios;

Vue.component('sample', require('./components/SampleComponent.vue'));

const app = new Vue({
    el: '#app',
    methods: {
        createItem: function() {
            // what's here?
        }
    }
});

SampleComponent.vue

<template>
...
</template>

<script>
    export default {
        mounted() {
            this.getItems();
        },
        data() {
            return {
                items: [],
                newItem: {'name': '', 'description': ''},
                fillItem: {'id': '', 'name': '', 'description': ''}
            }
        },
        methods: {
            getItems() {
                axios.get( 'api/data' ).then( response => {
                    let answer = response.data;
                    this.items = answer;
                })
            },
            clearItem(){
                this.newItem = {'name': '', 'description': ''};
                this.fillItem = {'id': '', 'name': '', 'description': ''};
            },
            createItem(){
                var self = this;
                $("#create-role").on("hidden.bs.modal", function () {
                    self.clearItem();
                }).modal('show');
            },
        }
    }
</script>

index.blade.php

<div id="app>
...

<!-- Load samplecomponent to blade -->
<sample></sample>

<!-- An external button to call method inside SampleComponent.vue, How can I do this? -->
<button type="button" class="btn btn-sm" @click="createItem" id="external-button">Create new item</a>

</div> <!-- End App -->

I've read the guide, but it still fails. Sorry for this newbie question, I just used VueJS. Thank you for all the help.

Answer 1

Your markup is broken because the <button> is closed with </a> instead of </button>

<button ... @click="createItem" id="external-button">Create...</a>

Also, createItem is a function so make sure to add parentheses!

Corrected code:

<button type="button" class="btn btn-sm" @click="createItem()" id="external-button">Create new item</button>

Answer 2

You could use a ref to call child's method:

Markup:

<div id="app>
  <sample ref="child"></sample>
  <button type="button" class="btn btn-sm" @click="callChildCreateItem" id="external-button">Create new item</a>
</div>

Parent:

const app = new Vue({
    el: '#app',
    methods: {
        callChildCreateItem: function() {
            this.$refs.child.createItem()
        }
    }
});

Or, you could use events (maybe a plugin like this make things easier)

Parent:

const app = new Vue({
    el: '#app',
    methods: {
        callChildCreateItem: function() {
             this.$events.fire('childCreateItem')
        }
    }
});

Child:

  export default {
        ...
        methods: {
           ...
            createItem(){
                ...
            },
        },
        events: {
          childCreateItem () {
            this.createItem()
          }
        },
    }

via: https://stackoverflow.com/a/47565763/965452