Javascript Vue.js和Mashine-本地和远程上的不同行为

我正在创建一个带有图像的页面，尽管这些图像将异步获取。此外，还可以过滤图像，因此每次更改后都应重新渲染图像

我的vue组件：

<template>
    <div>
        <div class="fixed-panel">
            <h4 class="site-name">Smart Math Puzzles</h4>
            <a class="btn btn-sm btn-success" @click="difficulty = 1">easy</a>
            <a class="btn btn-sm btn-info" @click="difficulty = 2">medium</a>
            <a class="btn btn-sm btn-warning" @click="difficulty = 3">hard</a>
            <a class="btn btn-sm btn-primary" @click="difficulty = 0">all</a>
        </div>
        <div id="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item" v-for="puzzle in puzzles" @click="openModal(puzzle)">
                <img :src="puzzle.imageAddress">
                <div class="overlay">
                    <span class="title">{{ puzzle.name }}</span>
                </div>
            </div>
        </div>

        <puzzle-modal></puzzle-modal>
    </div>
</template>
<script>
    import Masonry from 'masonry-layout';
    import ImagesLoaded from 'imagesloaded';
    import PuzzleModal from './PuzzleModal.vue';
    export default {
        data: function() {
            return {
                difficulty: 0,
                allPuzzles: []
            }
        },

        computed: {
            puzzles: function() {
                return this.filterPuzzlesByDifficulty(this.difficulty);
            }
        },

        watch: {
            puzzles: function() {
                this.createGrid();
            }
        },

        mounted: function() {
            this.fetchPuzzlesData();
        },

        methods: {
            fetchPuzzlesData: function() {
                this.$http.get('api/puzzles')
                    .then((response) => {
                        this.allPuzzles = response.data;
                    });
            },

            openModal: function(puzzle) {
                this.$eventHub.$emit('openModal', puzzle);
            },

            filterPuzzlesByDifficulty: function(diff) {
                if (diff === 0)
                    return this.allPuzzles;
                else
                    return this.allPuzzles.filter((puzzle) => puzzle.difficulty === diff);
            },

            imagesLoaded: function() {
                const grid = document.querySelector('#grid');
                return new ImagesLoaded(grid, () => {
                    setTimeout(() => {
                        this.masonry();
                    }, 100);
                });
            },

            masonry: function() {
                const grid = document.querySelector('#grid');
                return new Masonry(grid, {
                    percentPosition: true,
                    itemSelector: '.grid-item',
                    columnWidth: '.grid-sizer',
                });
            },

            createGrid: function() {
                if (!this.allPuzzles.length > 0)
                    return;

                this.imagesLoaded();
            }
        },

        components: {
            'puzzle-modal': PuzzleModal,
        }
    }
</script>

聪明的数学难题
容易的
中等的
坚硬的
全部的
{{puzzle.name}
从“砌体布局”导入砌体；
从“ImagesLoaded”导入ImagesLoaded；
从“./拼图模态.vue”导入拼图模态；
导出默认值{
数据：函数（）{
返回{
难度：0，
所有谜题：[]
}
},
计算：{
谜题：函数（）{
返回this.filterPuzzlesbyOfficiency（this.Officiency）；
}
},
观察：{
谜题：函数（）{
这是createGrid（）；
}
},
挂载：函数（）{
this.sdata（）；
},
方法：{
获取数据：函数（）{
这是$http.get（'api/puzzles'）
。然后（（响应）=>{
this.allPuzzles=response.data；
});
},
OpenModel：函数（拼图）{
此.$eventHub.$emit（'openModal'，拼图）；
},
FilterPuzzlesby难度：函数（差异）{
如果（差异===0）
返回此。所有谜题；
其他的
返回此.allPuzzles.filter（（puzzle）=>puzzle.diffuse==diff）；
},
imagesLoaded:function（）{
const grid=document.querySelector（“#grid”）；
返回已添加的新图像（网格，（）=>{
设置超时（（）=>{
这个。砖石（）；
}, 100);
});
},
砌体：功能（）{
const grid=document.querySelector（“#grid”）；
返回新砌体（网格{
位置：正确，
itemSelector:“.grid项”，
columnWidth:“.grid sizer”，
});
},
createGrid:function（）{
如果（！this.allPuzzles.length>0）
返回；
这个.imagesLoaded（）；
}
},
组成部分：{
“拼图模式”：拼图模式，
}
}

问题是： 在本地服务器上（图像几乎立即加载），一切正常，我的意思是：您可以使用计算值过滤图像，并使用砖石进行渲染

---

但是在远程服务器上，这开始中断砌体不会等待图像加载，而且，对我来说非常奇怪的是，计算值不起作用。如果我想显示全部，并且我点击“全部”过滤器，这是好的，所有元素都从所有拼图添加到拼图中。但是任何其他过滤器（简单、中等、硬）都会导致计算出的谜题根本没有任何元素。

好的。我已经解决了在这个.nextTick中包装这个.imagesLoaded（）的问题，所以createGrid方法如下所示：

this.$nextTick(() => this.imagesLoaded());

---

此外，过滤问题是由不同的数据类型引起的。我不知道为什么在本地开发中它被忽略了。

我已经解决了过滤问题。尽管如此，图像加载问题仍然存在。