[Vuejs]-Laravel & VueJS: Call VueJS Method Inside Blade

by

0👍

✅

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>
👤Ben V.

0👍

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

👤nachodd

Leave a comment