Laravel & VueJS: вызов метода VueJS внутри блейда

Question

Я искал решения и ссылки на свои проблемы. Я запутался, вызывая метод vue (например, createItem () {...}), который находится внутри компонента VueJs, с помощью внешней кнопки.

Вот мой "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 -->

Я прочитал руководство, но оно все равно не работает. Извините за этот вопрос новичка, я только что использовал VueJS. Спасибо за помощь.

Answer 1

Вы можете использовать ref для вызова метода ребенка:

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>

Родитель:

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

Или, вы можете использовать события (возможно, плагин , как , это упрощает работу)

Родитель:

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

Ребенок:

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

через: https://stackoverflow.com/a/47565763/965452

Answer 2

Ваша разметка повреждена, потому что <button> закрывается с </a> вместо </button>

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

Кроме того, createItem - это функция, поэтому обязательно добавьте скобки!

Исправленный код:

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