砌體不是功能

我想在我的應用程序中使用石工。以下是我的組件模板。砌體不是功能

<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

你能讓我知道我在做什麼錯嗎？

來源

2016-12-28 Gagan

我不確定你可以在單個文件組件中包含一個'script'。我想你需要通過npm安裝masonary，然後在你的主js文件中提供vue來訪問它。 –

您不能在單個文件組件的中間放置一個腳本標籤 –

將您的腳本標籤移動到index.html並嘗試使用窗口$（'。team'） – Deepak

您可以通過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>

來源

2016-12-29 03:46:46 Saurabh

沒有這個功能..我得到了同樣的錯誤。並且我確實有一個單獨的根元素elem .. – Gagan

@Gagan是否確定'this'的範圍在您的'this。$ http.get'塊中是正確的，請勾選[answer]（http://stackoverflow.com/ a/41093864/1610034） – Saurabh

是的 - 我有正確的''''這個'''範圍。我認爲它找到了正確的元素，但石匠沒有正確加載，這就是爲什麼我看到這個錯誤... – Gagan

砌體不是功能

回答

相關問題