0

I have a vueJs transition which brings in a message banner into view once a button is clicked. I want to use a setTimeout to remove the banner after a certain amount of time if a user does not interact with the UNDO button.

enter image description here

My Code for the message banner

HTML

<div v-for="card in cards">
    <credit-card v-if="!card.creditCardRemoved" :card="card" @remove="removeCard(card)"></credit-card>

    <transition name="fade" @leave="removeMessage">
        <div class="o-message-banner" v-if="card.creditCardRemoved == true">
            <div class="pull-left"> Your <strong> {{ card.name }} </strong> credit/cheque card has been removed </div> 
                <a class="o-undo" @click="undoDelete"> Undo </a>
            </div>
    </transition>


</div>

JS

data: {
    return {
        cards: [{
                name: 'visa',
                creditCardRemoved: false
            }, {
            name: 'mastercard',
            creditCardRemoved: false
        }],
        card: '',
        message: false
    }
},

methods: {
    undoDelete: function(card) {
        card.creditCardRemoved = false;
    },
    removeCard: function(card) {
        card.creditCardRemoved = true;
        this.removeMessage();
    },
    removeMessage: function() {
        setTimeout(function() {
            this.message = !this.message;
        }, 5000);
    }
}
CrisA
  • 45
  • 2
  • 10
  • What is @leave="removeMessage"? You are registering callback for leave event? –  Nov 03 '17 at 09:15
  • 1
    The `this` in your `setTimeout` callback is not your Vue component. Either use an arrow function or `.bind(this)` your callback. – Botje Nov 03 '17 at 09:29
  • Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – thanksd Nov 03 '17 at 13:08

0 Answers0