On my vue card, a success message is displayed and can be dismissed when the user clicks the ok button. I also want the card to disappear automatically after a few seconds, even if the button is not clicked. How can I achieve this? Below is my component code:
<template>
<div v-if="show" class="notifications">
<div class="globalSuccessWrapper">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card flat color="green">
<v-card-title primary-title>
<div>
<h3 class="headline">New User Created</h3>
<div>{{ card_text }}</div>
</div>
</v-card-title>
<v-card-actions>
<div class="close"><v-btn @click="removeMessage(0)">Ok</v-btn></div>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</div>
</div>
</template>
<script>
export default {
data() {
return {
card_text: 'Success!',
show: true,
notificationsToDisplay: [],
graphQLNotifications: [],
};
},
methods: {
removeMessage(seconds, timeout) {
if (!timeout) {
setTimeout(() => {
this.show = false;
}, seconds * 1000);
} else {
timeout(seconds);
}
},
},
};
</script>
<style scoped lang="scss">
.globalSuccessWrapper {
position: absolute;
z-index: 10000;
width: 100%;
}
</style>
In the else case under timeout, I aim to implement this feature within the removeMessage function.