How can I trigger the refreshMailList function when clicking on the mail-list component?
This is my Vue instance with a custom mail-list component:
Vue.component('mail-list', {
props: ['inboxmail'],
template:
`
<div>
<h4>{{inboxmail}}</h4>
<button>Refresh</button>
</div>
`
});
//Setting up the Vue object.
let options = {
el: "#app",
data: {
pollingId: null,
inbox: ''
},
created: function() {
this.refreshMailList()
},
methods:{
refreshMailList: function(){
fetch('/inbox')
.then(response => response.json())
.then(aJson => {
this.inbox = aJson;
})
},
} //end methods
} //end options
//Creating an instance of the ViewModel (vm)
let vm = new Vue(options);
In my index.html file, I have the following setup for the mail-list component:
<div id="app">
<mail-list v-bind:inboxmail="inbox" @refresh='refreshMailList'></mail-list>
</div>