I am struggling to figure out how to send an event from a child component to its parent in order to change the view.
Although I have been able to create and emit the event, my template does not seem to be properly registering it. I am working with Single File Components (SFC). Additionally, if I manually update the data object, everything works as expected.
In App.vue (Parent):
<template>
<div v-on:change-view="updateView">
<!-- Render the currently active component/page here -->
<component v-bind:is="currentView"></component>
</div>
</template>
<script>
export default {
name : 'app',
data () {
return {
currentView : 'Modal'
}
},
methods : {
updateView (view) {
console.log('Event listener triggered!')
this.currentView = view;
}
}
}
</script>
In Modal.vue (Child):
<template>
<div>
<vk-modal v-bind:show="show">
<h1>{{ title }}</h1>
<p>{{ body }}</p>
<p class="uk-text-right">
<vk-button v-on:click="$emit('change-view', 'Purposes')">More Information</vk-button>
<vk-button v-on:click="fullConsent" type="primary">I Agree</vk-button>
</p>
</vk-modal>
</div>
</template>
<script>
export default {
name : 'modal',
data () {
return {
show : true,
title : 'Hello'
}
},
methods : {
fullConsent () {
this.show = false;
}
}
}
</script>
If anyone could provide some assistance, that would be greatly appreciated! :)