Изменение состояния на true при входе нового элемента и изменение на false через 5 секунд

Question

Я создаю систему, с которой я слежу за чатом, и при вводе нового пожертвования я хочу отобразить gif, а затем показать его через 5 секунд , что-то вроде , изменяющего состояние переменной, равное true, в тот момент, когда она входит в новое пожертвование, а затем меняет ее на false через 5 секунд. Но я не знаю, как это сделать, используя Javascript и VueJS

Любая помощь с этой проблемой?

<template>
    <div id="dashboard">
        <section>
            <div class="col1">
                <div class="profile">
                    <div>
                        <img v-if="showAnimatedGif" src="https://media.giphy.com/media/OFbrZqxNMu7Ic/giphy.gif" class="donation-gif" alt="">
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>


<script>
    import { mapState } from "vuex";
    const fb = require('@/firebaseConfig.js')

    export default {
        data() {
            return {
                lastDonation: '',
                showAnimatedGif: false,
            }
        },
        computed: {
            ...mapState(['userProfile', 'currentUser'])
        },
        methods: {
            toggleAnimatedGif() {
                this.showAnimatedGif = !this.showAnimatedGif
            }
        },
        created: function () {
            var self = this;
            var uid = this.currentUser.uid ? this.currentUser.uid : this.userProfile.uid

            fb.realtimeDb.ref(`/users/${uid}/donations/`).on("child_added", (snapshot) => {
                var lastItem = snapshot.val();
                self.$set(self, 'lastDonation', lastItem.nickname)
                // THIS IS THE PLACE WHERE I WANT TO SHOW AND HIDE THE GIF AFTER 5 SECONDS
            }, function (errorObject) {
                console.log("The read failed: " + errorObject.code);
            });
        }
    }
</script>

Я не очень хорошо знаю, с чего начать, чтобы решить эту проблему, но в основном, когда новый элемент входит в базу данных, с помощью этой функции firebase я могу определить это как новый элемент, и хотел бы изменить состояние для showAnimatedGif установлено значение true, а через 5 секунд - false , поэтому для отображения GIF и через 5 секунд снова скрывают

Answer 1

Вы можете использовать наблюдателя, чтобы наблюдать за изменениями в showAnimatedGif, а затем выполнить setTimeout в обработчике.Этот тайм-аут переключит логическое значение обратно в false через x миллисекунд.

var mycomponent = new Vue({
     el: dashboard,
     data: {
         showAnimatedGif: false
     },
     methods: {
         donate(){
            //do something, maybe add data to db
            this.showAnimatedGif = true; //in the callback
         }
     },
     watch: {
        showAnimatedGif(){
         if(this.showAnimatedGif)
             setTimeout(() => this.showAnimatedGif = false, 5000); 
        }
     }
})

.imgwrapper{
height: 100px; width: 100px;
}

.imgwrapper img{
height: 100%; width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dashboard">
        <section>
            <div class="col1">
                <div class="profile">
                    <div class="imgwrapper" v-if="showAnimatedGif">
                        <img src="https://media.giphy.com/media/OFbrZqxNMu7Ic/giphy.gif" class="donation-gif" alt="">
                    </div>
                </div>
            </div>
        </section>

         <button @click="donate()">Donate</button>
    </div>