v上的无限更新循环框架7，用于计算

Question

我对vue相当陌生，对此我感到困惑。我有以下代码在我的应用程序中创建博客文章的显示。第一次查看该页面时，一切正常。如果我导航离开并返回页面，则会收到“组件渲染函数中可能存在无限更新循环”的信息。我检查了一下，发现有一个无限循环，但我无法解决问题。非常感谢您的帮助。

<f7-list media-list>
    <f7-list-item
        v-for="post in sortPosts"
        :title="post.title"
        :subtitle="post.category"
        :text="post.exc"
        :key="post.id"
        :link="'/single/'+post.id+'/'"
    >
        <img slot="media" v-bind:src="(post.img) ? post.img : noImg" width="70" />
    </f7-list-item>
</f7-list>


<script>
import store from '../js/store';
export default {
    data(){
        return{
            noImg:'/static/no-image.svg',
            posts:{},
            blog:{},
            menus:{},
            allowInfinite: true,
            infinitePage:1,
            initial:'Blog'
        }
    },
    mounted(){
        var self = this;
        this.initial = store.state.options.inital_page_type;
        this.posts = store.state.posts;
        if(self.blog.posts_per_page > this.posts.length){ self.loading=false; }
    },
    methods: {
        loadMore() {
            const self = this;
            if (!this.allowInfinite) return;
            this.allowInfinite = false;
            this.infinitePage += 1;
            // Excluded the update script
        }
    },
    computed: {
        sortPosts() {
            const posts = this.posts;
            console.log(posts);
            if(posts.length){
            posts.sort(function(a, b) { return a.sort - b.sort; });
            posts.sort().reverse();
            }
            return posts;
        }
    }
};
</script>

Answer 1

计算的道具不应变异数据。 posts.sort()突变数据。

一个快速解决方案可能是const posts = [...this.posts]，这样您就可以对副本进行排序，而不是对原始副本进行排序（这会触发无限更新循环）。