无限更新循环 framework7 vue on v-for computed

Question

我是 vue 的新手，我被这个难住了。我有以下代码在我的应用程序中创建博客文章的显示。我第一次查看该页面时一切正常。如果我离开并 return 到页面，我会收到 "You may have an infinite update loop in a component render function"。我检查了一下，发现有一个无限循环，但我无法解决问题。非常感谢任何帮助。

<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]，这样您就可以对副本进行排序，而不是对原始文件进行排序（这会触发无限更新循环）。

无限更新循环 framework7 vue on v-for computed

infinite update loop framework7 vue on v-for computed

javascript

vue.js

html-framework-7