光滑的滑块在 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
          }
        }]
      });
  }
})