I have a Vue website and am new to Vue.
I have a test button which when clicked I want to display a Bootstrap 4 (not Bootstrap-vue) success alert
then for it to remove after x seconds.
I have the easy part done, showing it but I can't seem to get the hang of hiding it after a certain amount of time.
Code I have:
HTML
<template>
<transition name="fade" mode="out-in">
<button type="button" class="btn btn-danger" @click="testToast">TEST BUTTON</button>
<div v-if="testButClicked" class="alert alert-success" role="alert">
Item successfully added to your cart
</div>
</transition>
</template>
Code
<script>
export default {
data() {
return {
testButClicked: false
}
},
methods: {
testToast() {
this.testButClicked = true;
}
}
}
</script>
CSS
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity 1.3s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
I have created this fiddle
I have tried adding a watch
to say when its displayed setTimout
to set value back to false, then I tried using the below code set in a global file so it can use it globally as I would like to use it on other pages but couldn't get it work at all nor could I find help on how to get it work
Vue.effect('toast', {
enter: function (el, insert, timeout) {
// insert() will actually insert the element
},
leave: function (el, remove, timeout) {
// remove() will actually remove the element
}
})
Then I tried the following HTML, again it would transition in correct or remove
<transition name="fade" mode="out-in" :duration="{ enter: 1500, leave: 2000 }">
I don't want button press which is all the solutions I seem to be finding online, I know jQuery to do this but can't get it to work in Vue.