I've been searching for solutions and references to resolve my issues. I'm struggling with calling a Vue method (e.g., createItem() {...}) that is located inside a VueJs component using an external button.
Here is my "app.js" file:
// ..\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 should go here?
}
}
});
SampleComponent.vue file:
<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 result = response.data;
this.items = result;
})
},
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 file:
<div id="app">
...
<!-- Load samplecomponent in blade template -->
<sample></sample>
<!-- How can I trigger the method inside SampleComponent.vue using an external button? -->
<button type="button" class="btn btn-sm" @click="createItem" id="external-button">Create new item</a>
</div> <!-- End of App -->
I've gone through the documentation, but I still haven't succeeded. Apologies for the basic question, as I am new to VueJS. Thank you for all your assistance.