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

Question

我正在尝试在 .vue 组件中使用 slick slider，但出现错误。

.slick is not a function

我已经完成了所有设置要求。这是我使用的代码：

    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，我怀疑这可能是问题所在。

这是一个 fiddle 我的代码：JSfiddle

Answer 1

您可以看到工作 fiddle here.

我没有收到您遇到的错误。然而它并没有更早地工作，因为代码：$('.gallery').slick({ 是在 mount 块中定义的，但是鉴于您以异步方式获取数据，我已将其移动到 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
          }
        }]
      });
  }
})

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

Slick slider not working in vue components

javascript

slider

vuejs2