slueスライダがvueコンポーネントで機能しない

Question

.vueコンポーネントでslick sliderを使用しようとしましたが、エラーが発生します。

.slickは、私はすべてのセットアップ要件を行った

関数ではありません。これは、コードで使用しています：

new Vue({ 
    el: '#app', 
    data: { 
     slider: null 
    }, 
    methods: { 
     selectImage: function() { 
      //http call here 
      return images 
     } 
    }, 
    mounted: function() { 
     this.slider = $('.gallery').slick({ 
      animation: true 
     }); 
    } 
}); 

<div class='gallery'> 
    <div v-for="img in images" @click="selectImage(img)"> 
    <img v-bind:src="img.url"> 
    </div> 
</div> 

私phpstormはES6を許可していませんし、それが問題になるかもしれないと疑っています。ここで

私のコードとフィドルです：JSfiddle

Answer 1

あなたが働いフィドルhereを見ることができます。

エラーが表示されません。しかし、以前はコードとして$('.gallery').slick({がマウントブロックに定義されていましたが、データを非同期で取得しているので、データを更新した後に実行されるupdatedブロックに移動しました。

続いて働いているVUEコード：

var app = new Vue({ 
    el: "#gallery", 
    data: function() { 
    return { 
     images: [], 
     slider: null 
    } 
    }, 
    mounted() { 
    var that = this 
    setTimeout(function() { 
     that.images.push('http://devcereal.com/wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png') 
     that.images.push('http://www.shawacademy.com/blog/wp-content/uploads/2015/10/URL-1000x605.jpg') 

    }, 300) 
    }, 
    updated() { 
     $('.gallery').slick({ 
     autoplay: true, 
     dots: true, 
     responsive: [{ 
      breakpoint: 500, 
      settings: { 
      dots: false, 
      arrows: false, 
      infinite: false, 
      slidesToShow: 2, 
      slidesToScroll: 2 
      } 
     }] 
     }); 
    } 
})