Masonry.JS 및 Vue.JS 사용

Question

나는 vue와 별도로 masonry.js을 사용하는 방법을 알고 있습니다. 그러나, 나는 그것을 작동시키고 뷰 프레임 워크 내에서 올바르게 호출하는 데 문제가 있습니다. 나는 그것을 창조 된 것 또는 준비된 것으로 불렀지 만 그리드가 올바르게 형성되지 못하는 것 같습니다. 프레임 워크 내에서 이것을 어떻게 작동시킬 수 있습니까? 오, 그리고이 스크립트 전에 html로 jquery를 호출했습니다. 여기에서 I는 컴포넌트의 내부가 무엇인가

편집 :

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 라이프 사이클 후크는 인스턴스가 생각한 방식으로 "준비"되면 트리거됩니다.

참조 :

Answer 2

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 내가이 일의 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 만 필요합니다. DOM이 바뀌었을 때 서로에게 말하기가 까다로운 부분이 있습니다.

은 그래서 첫 번째 변화는 VUE는 다른 답변에서 언급 한 바와 같이, 우리는 mounted 라이프 사이클 후크에 통지 모든 DOM을 렌더링 완료되면 여기, 우리가 어떤 다른 변화에 벽돌을

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

을 초기화 할 수있는 곳입니다 당신이 크기 사용을 layout() 방법을 항목을 변경하면 추가하거나 항목을 사용 제거하면 우리의 관점은,뿐만 아니라 벽돌을 업데이트 할 필요가 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(); 
      }); 
     } 
    } 

그 방법은 VUE의 시간 후라고 있습니다 Vue.nextTick 함수를 사용하여 DOM 업데이트를 완료했습니다. 여기에 working fiddle입니다.

Answer 5

mounted() 이벤트 내에서 벽돌을 호출해야 작동합니다. 내 프로젝트 (imagesloaded 포함)에서이 작업을 완벽하게 사용하고 있습니다.

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

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