v-for 计算上的无限更新循环 framework7 vue答案

【问题标题】：infinite update loop framework7 vue on v-for computedv-for 计算上的无限更新循环 framework7 vue
【发布时间】：2020-09-03 16:15:30
【问题描述】：

我对 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>

【问题讨论】：

计算道具不应该改变数据。 posts.sort() 改变数据。快速修复可能是const posts = [...this.posts]，这样您就可以对副本进行排序，而不是对原始文件进行排序（这会触发无限更新循环）。
效果很好。如果您想将其发布为答案，我会将其标记为如此。

标签： javascript vue.js html-framework-7

【解决方案1】：

计算道具不应改变数据。 posts.sort() 改变数据。

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

【讨论】：