vendredi 17 janvier 2020

Laravel and Vue.js loop function

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"></h1>
            </div>
            <div class="left">
                <div class="text"  v-if="text"></div>
            </div>
            <div class="right">
                <!--div class="image" v-bind:style="{ 'background': 'url(none)' }"></div-->
                <div class="image"  v-if="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


from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2G2bZss
via IFTTT

Aucun commentaire:

Enregistrer un commentaire