Laravel 和 Vue.js 循环函数

Posted 2023-02-16

【中文标题】Laravel 和 Vue.js 循环函数

【英文标题】：Laravel and Vue.js loop function

【发布时间】：2020-05-04 18:11:54

【问题描述】：

我正在尝试一次循环显示一些新的内容，在我完成此操作 8 次后，它应该获取数据（如果已更新）并再次执行此操作。我知道新闻的最大数量是 8，每个新闻可以包含视频或图像，所以基于此我需要更改我的结果，但这不是问题。问题是，我似乎无法找到“正确”的方式来循环浏览我的新闻而不会崩溃。不对，我得到了这个解决方案（超时功能使我的应用程序崩溃）。

<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)
                    
                );        
            

这一直给我错误：

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

【问题讨论】：

使用箭头功能。 customDelay.then(()=> ......)

【参考方案1】：

出现错误是因为 this 在您的承诺中未定义。

你可以做的是：

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)
     
); 

或

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)); 

我认为这将解决您的错误。

你也可以找到答案here。

祝你好运！