Function of setInterval in Vue.js

Question

I want to perform a while loop with one second of interval.

The method which I want to operate is;

new Vue({
    el: "#app14",
    data: {
        dealerCards: [],
    },
    computed: {
        dealerHand() {
            return CalcHand(this.dealerCards);
        }
    },
    methods: {
        Stand: function() {
            while (this.dealerHand < 17) {
                this.dealerCards.push(Draw());
                console.log("DH: " + this.dealerHand);
            }
        },
    },
});

CalcHand returns the sum of the input array.

I rewrite it with setInterval function;

var dd = setInterval(function() {
    this.dealerCards.push(Draw());
    console.log("DH: " + this.dealerHand);

    if (this.dealerHand >= 17) {
        clearInterval(dd);
        return;
    }
}, 1000);

However, browser console said this.dealerCards is undefined. I wonder if you have any idea why this error shows up.

This question is still a duplicate. I'm glad you found your solution, but there already is a canonical answer to this question as asked. — Multihunter, Nov 19 '20 at 05:22
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Multihunter, Nov 19 '20 at 05:23

score 0 · Answer 1 · answered Nov 18 '20 at 19:04

0

The function of setInterval should be like this;

var dd = setInterval(() => {
    this.dealerCards.push(Draw());
    console.log("DH: " + this.dealerHand);

    if (this.dealerHand >= 17) {
        clearInterval(dd);
    }
}, 1000);

answered Nov 18 '20 at 19:04

Kota.M

117
7

Function of setInterval in Vue.js

1 Answers1

Linked