砌体不是功能

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/[email protected]/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

您可以通过this.$el获得vue组件DOM元素。所以，你可以做到以下几点：

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

但请记住，这是有效，只要你的组件是不是Fragment Instance即它有一个根HTML标记。

---

您需要在index.html中放置以下脚本行，以便正确加载。

<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>