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({是在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组件

1 个答案: