Question

在我的Vue项目中，我尝试对数组进行排序并仅返回前3个元素，但由于某些原因，我得到了一个错误。

您可能在组件渲染函数中有一个无限的更新循环。

在我的项目中，我有两个使用 v-for 指令的div。其中一个调用“ newGames”计算方法，第二个调用“ mostPlayed”。

如果我从项目中删除该div之一，那么一切都很好，但在其他情况下，总会出现错误“无限循环”。

那为什么会发生呢？代码有什么问题。完整代码如下。

<template>
        <div>
            <div v-for="game in newGames" class="col-lg-4">
                <div class="icon-box-3">
                    <div class="icon-box-icon">
                                        <i class="fa fa-bullseye" aria-hidden="true"><div>{{formatDate(game.created_at)}}</div></i>
                    </div>
                    <div class="icon-box-content">
                        <h5 class="heading">{{game.title}}</h5>
                        <span class="text-white">{{trimText(game.description,120)}}</span>
                        <br>

                        <button @click="getGame(game.id)" type="button" class="btn btn-warning btn-sm mt-20">!Graj</button>
                    </div>
                </div>
            </div>
        <div>
        <div v-for="game in mostPlayed" class="col-lg-4">
            <div class="card course-card">
                <div class="course-head">
                    <a v-on:click.stop="getGame(game.id)" class="course-link"><i class="fa fa-link" aria-hidden="true"></i></a>
                </div>
                <div class="course-detail">
                    <h4 class="heading">{{game.title}}</h4>
                    <span class="brief">{{game.description.substr(0,60)}}</span>
                    <ul class="course-features">
                        <li><i class="fa fa-gamepad"></i> {{game.game_played}}</li>
                        <li><i class="fa fa-clock-o"></i> {{game.game_length}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </template>
    <script>
        import axios from 'axios';
        import {mapActions,mapGetters} from 'vuex';

        export default {
            name: 'Main',
            data: function() {
                return {
                    games: [],
                }
            },
            computed: {           
                mostPlayed(){
                    let newArray = this.games.sort(function(a, b) {
                        return b.game_played - a.game_played;
                    });
                    return newArray.slice(0,3);
                },
                newGames(){
                   let newArray = this.games.sort(function(a, b) {
                        a = new Date(a.created_at).getTime();
                        b = new Date(b.created_at).getTime();
                        return b - a;
                    });
                   return newArray.slice(0,3);
                }
            },
            methods:{
                ...mapActions(['getGame']),

                loadGames(){
                    axios.get('/games',{ headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': this.getToken,
                    }}).then(response=>{
                        this.games = response.data;                    
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                formatDate(date){
                    return date.substr(2,8)
                },
                trimText(text,long){
                    if(text.length <= long){
                        return text;
                    }
                    return text.substr(0,long)+'...';
                }
            },
             beforeMount(){
                this.loadGames();
            }
        }
    </script>

谢谢。

Answer 1

首先，谢谢您将我引介到其他类似问题。它帮助我了解错误所在。这是我避免此问题的解决方案。

computed: {
            mostPlayed(){
                let newArray = this.games.slice(0,this.games.length).sort(function(a, b) {
                    return b.game_played - a.game_played;
                });
                return newArray.slice(0,3);
            },
            newGames(){
               let newArray = this.games.slice(0,this.games.length).sort(function(a, b) {
                    a = new Date(a.created_at).getTime();
                    b = new Date(b.created_at).getTime();
                    return b - a;
                });
               return newArray.slice(0,3);
            }
        },

Vue-排序和切片表导致无限循环错误

1 个答案: