Vue.js和石工 - 在本地和遠程的不同行爲

我正在創建一個圖像磚石的頁面，雖然該圖像將被異步提取。此外，您可以過濾圖像，因此應在每次更改後重新渲染。Vue.js和石工 - 在本地和遠程的不同行爲

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

的問題是：在本地服務器（在圖像被幾乎立即加載）一切工作正常，並通過一切，我的意思是：你可以用計算出的價值，他們篩選圖片用砌體渲染。

但是在遠程服務器上開始中斷。 砌體不等待圖像加載此外，對我來說很奇怪，計算值不起作用。如果我想顯示所有內容，並點擊「全部」過濾條件，那麼所有元素都會從allPuzzles添加到拼圖。但是任何其他過濾器（簡單，中等，難度）都會導致計算出的謎題根本沒有任何元素。

來源

2016-12-18 Łukasz Szcześniak

我解決了過濾問題。雖然，圖像加載問題依然存在。 –

好的。我已經解決了問題，包裝this.imagesLoaded（）在此$ nextTick，所以createGrid方法是這樣的：

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

此外，通過過濾問題是由不同的數據類型引起的。我不知道爲什麼當地的發展被忽略了。

來源

2016-12-18 12:08:06

Vue.js和石工 - 在本地和遠程的不同行爲

回答

相關問題