벽돌은 기능이 아닙니다.

Question

내 응용 프로그램에서 석조물을 사용하려고합니다. 다음은 구성 요소 템플릿입니다.

<template> 
    <div> 
     <section class="section"> 
      <div class="container"> 
       <div class="row team"> 
        <div class="col-md-4 col-sm-6 member" v-for="team in teamMembers"> 
         <div class="team__item"> 
          <div class="team__info"> 
           <h4>{{team.name}}</h4> 
           <small>{{team.title}}</small> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
    </div> 
</template> 

<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script> 

<script> 
    export default { 
     data() { 
      return { 
       teamMembers: [] 
      } 
     }, 
     mounted() { 
      this.getTeamMembers(); 
     }, 
     methods : { 
      getTeamMembers : function() { 
       this.$http.get('teamMembers').then(response =>{ 
        // console.log(response); 
        if(response.data.status=200) { 
         this.teamMembers = response.data.teamMembers; 
         this.$nextTick(function() { 
          var $container = $('.team'); 

           $container.masonry({ 
           columnWidth: '.member', 
           itemSelector: '.member' 
           }); 
         }) 
        } 
       }) 
      } 
     } 
    } 
</script> 

보기가 렌더링 될 때마다 다음과 같은 오류가 발생합니다.

TypeError: $container.masonry is not a function 

내가 여기서 잘못하고있는 것을 알려주시겠습니까?

Answer 1

vue 구성 요소 DOM 요소는 this.$el까지 가져올 수 있습니다. 그래서 당신은 다음과 같은 작업을 수행 할 수

$(this.$el.querySelector('.team')).masonry({ 
          columnWidth: '.member', 
          itemSelector: '.member' 
          }); 

을하지만 구성 요소가 아니므로이만큼 유효 기억 해요 Fragment Instance 즉이 단일 루트 HTML 태그가 있습니다.

---

다음 스크립트 행을 index.html에 넣으면 제대로로드됩니다.

<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>