Masonry.JSとVue.JSを使用

Question

私はvueとは別にmasonry.jsの使い方を知っています。しかし、私はそれを機能させるために問題を持っていて、正しくvueフレームワークの中で呼び出されます。私はそれを作成されたか準備中のものの中に呼びましたが、どちらもグリッドを正しく形成することはできません。フレームワーク内でこれをどのように動作させることができますか？ああ、私はこのスクリプトの前にhtmlでjqueryを呼び出しています。ここでIは、コンポーネントの内部に持っているものである。

編集：

私は石工はJSとの高さを割り当て、絶対位置するアイテムを変更することによって、グリッドを達成していることを見ることができます。ただし、正しく配置されていません。それはグリッドにあるように横並びの代わりに互いを重ね合わせる。

<template> 
    <div class="projects--container"> 
    <div class="inner-section inner--options"> 
     <div class="grid"> 
      <div class="grid-item"></div> 
      <div class="grid-item"></div> 
      <div class="grid-item"></div> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 
export default{ 
    ready: function() { 
     this.mason(); 
    }, 
    data: function() { 
     return { 
      options: [ 
       { 
        option: 'projects', 
        phrase: 'for clients', 
        slogan: 'slogan...' 
       }, 
       { 
        option: 'sides', 
        phrase: 'for us', 
        slogan: 'we love what we make' 
       }, 
       { 
        option: 'moments', 
        phrase: 'with the crew' 
       } 
      ] 
     } 
    }, 
    methods: { 
     revert: function() { 
      this.$dispatch('return-home', true) 
     }, 
     mason: function() { 
      var $grid = $('.grid').masonry({ 
       itemSelector: '.grid-item', 
       columnWidth: 250 
      }); 
      $grid.masonry('layout'); 
     } 
    }, 
    events: { 
     'option-select': function (option) { 
     } 
    } 

} 
</script> 

Answer 1

はVue2では、readyライフサイクルフックのようなものはありません。代わりに、mountedライフサイクルフックは、インスタンスがあなたが思うように「準備ができている」と起動されます。

参考：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Answer 2

私はこれを行うのVUEウェイはrefsを使用していると思います。 refプロパティをテンプレート内のhtml要素に割り当て、mounted callback内のvm.$refインスタンスプロパティを使用してアクセスします。

サンプルコードは次のようになります。

<template> 
    <div class="grid" ref="grid"> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    </div> 
</template> 

<script> 
    import Masonry from "masonry"; // or maybe use global scoped variable here 
    export default { 
    mounted: function(){ 
     let $masonry = new Masonry(this.$refs.grid, { 
     // masonry options go in here 
     // see https://masonry.desandro.com/#initialize-with-vanilla-javascript 
     }); 
    } 
    } 
</script> 

Answer 3

それは、垂直スタックだけで（それはcodepen/plunkrなしで伝えるのは難しいです）石工が動作していないことを示している可能性があります。 @ riyaz-aliは正しいアイデアを持っています。

Answer 4

私が見たように、vueのようなほとんどのmv​​ *フレームワークはjs（モデル）と同期してDOM要素（ビュー）を保持しています。 DOMが変更されたときに、お互いに伝えるのが難しい部分です。

だから、最初の変更は、ここでは、VUEはすべてのDOMをレンダリングするために終了したときに他の回答で述べたように、我々はmountedライフサイクルフックに通知されている私たちは石工にする任意の他の変更で

mounted() { 
    let grid = document.querySelector('.grid'); 
    this.msnry = new Masonry(grid, { 
     columnWidth: 25 
    }); 
}, 

を初期化することができる場所です私たちの見解はまた、あなたがアイテムを追加または削除した場合、あなたがreloadItems()方法

methods: { 
     toggle(item) { 
      item.isGigante = !item.isGigante; 
      Vue.nextTick(() => { 
       // DOM updated 
       this.msnry.layout(); 
      }); 
     }, 
     add() { 
      this.items.push({ 
       isGigante: false, 
       size: '' + widthClasses[Math.floor(Math.random() * widthClasses.length)] + ' ' + heightClasses[Math.floor(Math.random() * heightClasses.length)] 
      }); 
      Vue.nextTick(() => { 
       // DOM updated 
       this.msnry.reloadItems(); 
       this.msnry.layout(); 
      }); 
     } 
    } 

を使用し、サイズの使用layout()方法の項目を変更した場合、これらのメソッドは、VUEの時間後に呼び出されることに注意してください、だけでなく石工を更新する必要がVue.nextTick機能を使用してDOMアップデートを完了しました。 ここにはworking fiddleがあります。

Answer 5

mounted()の内部でmasonryを呼び出して動作させる必要があります。 私はこれを私のプロジェクト（imagesloadedを含む）に完全に使用しています。

massonryApply (container, context, selector) { 
    container = $(`#${container}`) 
    const $grid = container.imagesLoaded(function() { 
    $grid.masonry({ 
     itemSelector: `.${selector}`, 
     percentPosition: true, 
     columnWidth: `.${selector}` 
    }) 

    $grid.masonry('reloadItems') 
    }) 
}