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
– Dmytro

2020-01-17 20:55:40 +00:00
Commented Jan 17, 2020 at 20:55 — Dmytro
– Dmytro, Commented Jan 17, 2020 at 20:55

mare96 · Accepted Answer · 2020-01-17 22:08:58Z

2

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!

answered Jan 17, 2020 at 22:08

mare96

3,8541 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel and Vue.js loop function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related