光滑的滑块在 vue 组件中不起作用

Question

我正在尝试在 .vue 组件中使用光滑的滑块，但出现错误。

.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

你可以在这里看到正在工作的小提琴。

我没有收到您收到的错误。然而，它之前没有工作，因为代码：$('.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
          }
        }]
      });
  }
})