I am facing an issue with accessing data inside a simple component.
Here is the code for my component:
<template>
<!-- success -->
<div class="message-box message-box-success animated fadeIn" id="message-box-success">
<div class="mb-container">
<div class="mb-middle">
<div class="mb-title"><span class="fa fa-check"></span> {{title}} </div>
<div class="mb-content">
<p>{{successMessage}}</p>
</div>
<div class="mb-footer">
<button class="btn btn-default btn-lg pull-right mb-control-close" @click.prevent="close">OK</button>
</div>
</div>
</div>
</div>
<!-- end success -->
</template>
<script>
/* eslint-disable no-undef */
export default {
name: 'SuccessMsg',
props: {
title: ''
},
data () {
return {
successMessage: 'success'
}
},
methods: {
show: function (message) {
// I need help here as I'm getting undefined in console
console.log(this.successMessage)
// this.successMessage = message
$('#message-box-success').addClass('open')
},
close: function () {
$('#message-box-success').removeClass('open')
}
}
}
</script>
This issue is specific to accessing data within the component. Can someone provide assistance in resolving it?
Any help would be greatly appreciated. Thank you!