Laravel and Vue.js loop function

Question

I'am trying to loop trough some new showing one at a time, and after I've done this 8 times it should get the data (if updated) and do it again. I know the max count of news is 8 and each news can contain either a video or a image, so based on this I need to change my result, but that's not the problem. The problem is, that I've can't seem to find the "correct" way to loop trough my news without it crashes. Right not I got this solution (a timeout function made my application crash).

<template>
    <div>
        <div class="a_news">
            <div class="full">
                <h1 class="title" v-if="title">{{title}}</h1>
            </div>
            <div class="left">
                <div class="text"  v-if="text">{{text}}</div>
            </div>
            <div class="right">
                <!--div class="image" v-bind:style="{ 'background': 'url(none)' }"></div-->
                <div class="image"  v-if="image">{{image}}</div>                   
            </div>
        </div>
    </div>
</template>

<script>
    let timing = '5000';
    import VideoPlayer from "./VideoPlayer";

    export default {
        data() {
            return {
                news: [],
                title: 'getting headline',
                text: 'getting text',
                image: 'getting image',
                //videoEntry: 'getting entry'
            }
        },
        components: {
            'videoplayer': VideoPlayer
        },
        created() {
            this.getData(false,0); // first run
        },
        methods: {
            getData(oldnum, num) {
                const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";
                axios.get(CORS_PROXY + URL +'/news.json').then(resp => {

                    if (resp.data) {
                        console.log(resp.data)
                        if (oldnum === false) {
                            this.news = []; // reset news array
                            this.news = resp.data.slides;
                            console.log("sletter array")
                        }

                        this.startSlideNews(oldnum, num)
                        //return this.news;
                    } 
                });
            },
            startSlideNews(oldnum, num) {
                console.log(oldnum, num)
                this.title = this.news[num].title; 
                this.text = this.news[num].text; 
                // video ?
                if (this.news[num].videos.length > 0) {
                    if (this.news[num].videos[0] != null) {
                        this.videoEntry = this.news[num].videos[0].entryid;
                    } else {
                        console.log("video, but no videofile");
                    }
                } else {
                    if (this.news[num].images[0] != null) {
                        this.image = this.news[num].images[0];
                    } else {
                        // no picture found
                    }
                }

                var customDelay = new Promise(function(resolve) {
                    var delay = 10000; // milliseconds
                    var before = Date.now();
                    while (Date.now() < before + delay) {};
                    resolve('Success!');
                });

                customDelay.then(function() {
                    if (oldnum == false) {
                        oldnum = num;
                    }
                    if (oldnum >= 0) {
                        oldnum = num;
                        num = num + 1
                    }
                    if (num >= 8) {
                        this.getData(false, 0)
                    } else {
                        this.getData(oldnum, num) <--- THIS IS WHERE THE ERROR HAPPENS?
                        //this.startSlideNews(oldnum, num)
                    }
                });        
            }

This keeps giving me the error:

app.js:1990 Uncaught (in promise) TypeError: Cannot read property 'getData' of undefined
    at app.js:1990

use arrow function. `customDelay.then(()=> {......})` – Dmytro Jan 17 '20 at 20:55 — Dmytro, Jan 17 '20 at 20:55

score 2 · Accepted Answer · answered Jan 17 '20 at 22:08

Error appears because this is undefined inside your promise.

What you can do is like:

let that = this
customDelay.then(() => {
     if (oldnum == false) {
        oldnum = num;
     }
     if (oldnum >= 0) {
        oldnum = num;
        num = num + 1
     }
     if (num >= 8) {
        that.getData(false, 0)
     } else {
        that.getData(oldnum, num)
     }
});

or

customDelay.then(() => {
     if (oldnum == false) {
        oldnum = num;
     }
     if (oldnum >= 0) {
        oldnum = num;
        num = num + 1
     }
     if (num >= 8) {
        this.getData(false, 0)
     } else {
        this.getData(oldnum, num)
     }
}.bind(this));

I think that will fix your error.

Also you can find answer here.

Good luck!

Laravel and Vue.js loop function

1 Answers1