programing

vue 구성 요소에서 슬릭 슬라이더가 작동하지 않음

prostudy 2022. 5. 4. 21:33
반응형

vue 구성 요소에서 슬릭 슬라이더가 작동하지 않음

.vue 구성 요소의 슬라이더를 사용하려고 하는데 오류가 발생했어.

.csv는 함수가 아니다.

나는 모든 설치 요건을 갖추었다.사용 중인 코드:

    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를 허용하지 않으며 그것이 문제일 수도 있다고 의심하고 있다.

여기 내 코드 바이올린: JS피들

당신은 여기서 일하는 것을 볼 수 있다.

나는 네가 받고 있는 오류를 이해하지 못하겠다.그러나 이 암호는 더 일찍 작동하지 않았다.$('.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
          }
        }]
      });
  }
})

참조URL: https://stackoverflow.com/questions/41800291/slick-slider-not-working-in-vue-components

반응형