Issue on initial page load.

Question

Issue on initial page load.

Closed this issue 6 years ago · 1 comments

Hey,

I'm not sure where I'm going wrong. I have a .vue file that's using the Slick component. On initial page load, the images are displayed top-down/block style. It isnt until I make a change in ImageGallery.vue that causes webpack to do a hot-update, at which point the slider works as intended.

ImageGallery.vue

<template>
    <div>
        <Slick
            ref="slick"
            :options="slickOptions"
            @afterChange="handleAfterChange"
            @beforeChange="handleBeforeChange"
            @breakpoint="handleBreakpoint"
            @destroy="handleDestroy"
            @edge="handleEdge"
            @init="handleInit"
            @reInit="handleReInit"
            @setPosition="handleSetPosition"
            @swipe="handleSwipe"
            @lazyLoaded="handleLazyLoaded"
            @lazyLoadError="handleLazeLoadError">
            <div v-for="image in images" :key="image.id" :images="images">
                <a :href="sitedomain + image.file"><img :src="sitedomain + image.file" alt=""></a>
            </div>
        </Slick>
    </div>
</template>

<script>
import { IMAGE_GALLERY_QUERY } from '../constants/graphql'
import Slick from 'vue-slick'
import '../../node_modules/slick-carousel/slick/slick.css'
import '../../node_modules/slick-carousel/slick/slick-theme.css'

export default {
  name: 'ImageGallery',
  data () {
    return {
      images: '',
      sitedomain: 'http://localhost:8000/media/',
      slickOptions: {
        slidesToShow: 3,
        infinite: true,
        accessibility: true,
        adaptiveHeight: false,
        arrows: true,
        dots: true,
        draggable: true,
        edgeFriction: 0.30,
        swipe: true
      }
    }
  },
  components: {
    Slick
  },
  methods: {
    next () {
      this.$refs.slick.next()
    },

    prev () {
      this.$refs.slick.prev()
    },

    reInit () {
      // Helpful if you have to deal with v-for to update dynamic lists
      this.$nextTick(() => {
        this.$refs.slick.reSlick()
      })
    },

    // Events listeners
    handleAfterChange (event, slick, currentSlide) {
      console.log('handleAfterChange', event, slick, currentSlide)
    },
    handleBeforeChange (event, slick, currentSlide, nextSlide) {
      console.log('handleBeforeChange', event, slick, currentSlide, nextSlide)
    },
    handleBreakpoint (event, slick, breakpoint) {
      console.log('handleBreakpoint', event, slick, breakpoint)
    },
    handleDestroy (event, slick) {
      console.log('handleDestroy', event, slick)
    },
    handleEdge (event, slick, direction) {
      console.log('handleEdge', event, slick, direction)
    },
    handleInit (event, slick) {
      console.log('handleInit', event, slick)
    },
    handleReInit (event, slick) {
      console.log('handleReInit', event, slick)
    },
    handleSetPosition (event, slick) {
      console.log('handleSetPosition', event, slick)
    },
    handleSwipe (event, slick, direction) {
      console.log('handleSwipe', event, slick, direction)
    },
    handleLazyLoaded (event, slick, image, imageSource) {
      console.log('handleLazyLoaded', event, slick, image, imageSource)
    },
    handleLazeLoadError (event, slick, image, imageSource) {
      console.log('handleLazeLoadError', event, slick, image, imageSource)
    }
  },
  apollo: {
    images: {
      query: IMAGE_GALLERY_QUERY
    }
  }
}
</script>

<style>

</style>

On Initial Page Load:

<div class="slick-initialized slick-slider">
    <div class="slick-list draggable">
      <div class="slick-track"style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"></div>
    </div>
    <div images="[object Object],[object Object],[object Object],[object Object]">
      <a href="http://localhost:8000/media/original_images/shopping4_LZsCzt4.jpeg"><img alt=""
           src="http://localhost:8000/media/original_images/shopping4_LZsCzt4.jpeg"></a>
    </div>
    <div images="[object Object],[object Object],[object Object],[object Object]">
      <a href="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"><img alt=""
           src="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"></a>
    </div>
    <div images="[object Object],[object Object],[object Object],[object Object]">
      <a href="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"><img alt=""
           src="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"></a>
    </div>
    <div images="[object Object],[object Object],[object Object],[object Object]">
      <a href="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"><img alt=""
           src="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"></a>
    </div>
  </div>

After hotUpdate:

<div class="slick-initialized slick-slider slick-dotted">
    <button aria-label="Previous" class="slick-prev slick-arrow" style="" type="button">Previous</button>
    <div class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 4752px; transform: translate3d(-1296px, 0px, 0px);">
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="-3"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="-2"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="-1"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="false"
                class="slick-slide slick-current slick-active"
                data-slick-index="0"
                id="slick-slide10"
                role="tabpanel"
                style="width: 432px;">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping4_LZsCzt4.jpeg"
                    tabindex="0"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping4_LZsCzt4.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="false"
                class="slick-slide slick-active"
                data-slick-index="1"
                id="slick-slide11"
                role="tabpanel"
                style="width: 432px;">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"
                    tabindex="0"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="false"
                class="slick-slide slick-active"
                data-slick-index="2"
                id="slick-slide12"
                role="tabpanel"
                style="width: 432px;">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"
                    tabindex="0"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide"
                data-slick-index="3"
                id="slick-slide13"
                role="tabpanel"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="4"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping4_LZsCzt4.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping4_LZsCzt4.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="5"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping3_naH1SjJ.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="6"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping2_AZ9WFjO.jpeg"></a>
            </div>
            </div>
        </div>
        <div aria-hidden="true"
                class="slick-slide slick-cloned"
                data-slick-index="7"
                style="width: 432px;"
                tabindex="-1">
            <div>
            <div images="[object Object],[object Object],[object Object],[object Object]"
                    style="width: 100%; display: inline-block;">
                <a href="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"
                    tabindex="-1"><img alt=""
                    src="http://localhost:8000/media/original_images/shopping_UeimPIT.jpeg"></a>
            </div>
            </div>
        </div>
        </div>
    </div><button aria-label="Next"
            class="slick-next slick-arrow"
            style=""
            type="button">Next</button>
    <ul class="slick-dots"
        role="tablist"
        style="">
        <li class="slick-active"
            role="presentation"><button aria-controls="slick-slide10"
                aria-label="1 of 2"
                aria-selected="true"
                id="slick-slide-control10"
                role="tab"
                tabindex="0"
                type="button">1</button></li>
        <li role="presentation"><button aria-controls="slick-slide11"
                aria-label="2 of 2"
                id="slick-slide-control11"
                role="tab"
                tabindex="-1"
                type="button">2</button></li>
        <li role="presentation"><button aria-controls="slick-slide12"
                aria-label="3 of 2"
                id="slick-slide-control12"
                role="tab"
                tabindex="-1"
                type="button">3</button></li>
        <li role="presentation"><button aria-controls="slick-slide13"
                aria-label="4 of 2"
                id="slick-slide-control13"
                role="tab"
                tabindex="-1"
                type="button">4</button></li>
    </ul>
</div>

in the response for .hot-update.json:

{"h":"0f7f971cd180e19cae2f","c":{"0":true}}

In the response for .hot-update.js:

webpackHotUpdate(0,{

/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/ImageGallery.vue":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__constants_graphql__ = __webpack_require__(\"./src/constants/graphql.js\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_vue_slick__ = __webpack_require__(\"./node_modules/vue-slick/slickCarousel.vue\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_slick_carousel_slick_slick_css__ = __webpack_require__(\"./node_modules/slick-carousel/slick/slick.css\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_slick_carousel_slick_slick_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__node_modules_slick_carousel_slick_slick_css__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__node_modules_slick_carousel_slick_slick_theme_css__ = __webpack_require__(\"./node_modules/slick-carousel/slick/slick-theme.css\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__node_modules_slick_carousel_slick_slick_theme_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__node_modules_slick_carousel_slick_slick_theme_css__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n  name: 'ImageGallery',\n  data: function data() {\n    return {\n      images: '',\n      sitedomain: 'http://localhost:8000/media/',\n      slickOptions: {\n        slidesToShow: 3,\n        infinite: true,\n        accessibility: true,\n        adaptiveHeight: false,\n        arrows: true,\n        dots: true,\n        draggable: true,\n        edgeFriction: 0.30,\n        swipe: true\n      }\n    };\n  },\n\n  components: {\n    Slick: __WEBPACK_IMPORTED_MODULE_1_vue_slick__[\"a\" /* default */]\n  },\n  methods: {\n    next: function next() {\n      this.$refs.slick.next();\n    },\n    prev: function prev() {\n      this.$refs.slick.prev();\n    },\n    reInit: function reInit() {\n      var _this = this;\n\n      // Helpful if you have to deal with v-for to update dynamic lists\n      this.$nextTick(function () {\n        _this.$refs.slick.reSlick();\n      });\n    },\n\n\n    // Events listeners\n    handleAfterChange: function handleAfterChange(event, slick, currentSlide) {\n      console.log('handleAfterChange', event, slick, currentSlide);\n    },\n    handleBeforeChange: function handleBeforeChange(event, slick, currentSlide, nextSlide) {\n      console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);\n    },\n    handleBreakpoint: function handleBreakpoint(event, slick, breakpoint) {\n      console.log('handleBreakpoint', event, slick, breakpoint);\n    },\n    handleDestroy: function handleDestroy(event, slick) {\n      console.log('handleDestroy', event, slick);\n    },\n    handleEdge: function handleEdge(event, slick, direction) {\n      console.log('handleEdge', event, slick, direction);\n    },\n    handleInit: function handleInit(event, slick) {\n      console.log('handleInit', event, slick);\n    },\n    handleReInit: function handleReInit(event, slick) {\n      console.log('handleReInit', event, slick);\n    },\n    handleSetPosition: function handleSetPosition(event, slick) {\n      console.log('handleSetPosition', event, slick);\n    },\n    handleSwipe: function handleSwipe(event, slick, direction) {\n      console.log('handleSwipe', event, slick, direction);\n    },\n    handleLazyLoaded: function handleLazyLoaded(event, slick, image, imageSource) {\n      console.log('handleLazyLoaded', event, slick, image, imageSource);\n    },\n    handleLazeLoadError: function handleLazeLoadError(event, slick, image, imageSource) {\n      console.log('handleLazeLoadError', event, slick, image, imageSource);\n    }\n  },\n  apollo: {\n    images: {\n      query: __WEBPACK_IMPORTED_MODULE_0__constants_graphql__[\"c\" /* IMAGE_GALLERY_QUERY */]\n    }\n  },\n  mounted: function mounted() {\n    console.log('mountd');\n  }\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvYmFiZWwtbG9hZGVyL2xpYi9pbmRleC5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXNjcmlwdCZpbmRleD0wIS4vc3JjL2NvbXBvbmVudHMvSW1hZ2VHYWxsZXJ5LnZ1ZS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9JbWFnZUdhbGxlcnkudnVlPzA2ZWUiXSwic291cmNlc0NvbnRlbnQiOlsiPHRlbXBsYXRlPlxuICAgIDxkaXY+XG4gICAgICAgIDxTbGlja1xuICAgICAgICAgICAgcmVmPVwic2xpY2tcIlxuICAgICAgICAgICAgOm9wdGlvbnM9XCJzbGlja09wdGlvbnNcIlxuICAgICAgICAgICAgQGFmdGVyQ2hhbmdlPVwiaGFuZGxlQWZ0ZXJDaGFuZ2VcIlxuICAgICAgICAgICAgQGJlZm9yZUNoYW5nZT1cImhhbmRsZUJlZm9yZUNoYW5nZVwiXG4gICAgICAgICAgICBAYnJlYWtwb2ludD1cImhhbmRsZUJyZWFrcG9pbnRcIlxuICAgICAgICAgICAgQGRlc3Ryb3k9XCJoYW5kbGVEZXN0cm95XCJcbiAgICAgICAgICAgIEBlZGdlPVwiaGFuZGxlRWRnZVwiXG4gICAgICAgICAgICBAaW5pdD1cImhhbmRsZUluaXRcIlxuICAgICAgICAgICAgQHJlSW5pdD1cImhhbmRsZVJlSW5pdFwiXG4gICAgICAgICAgICBAc2V0UG9zaXRpb249XCJoYW5kbGVTZXRQb3NpdGlvblwiXG4gICAgICAgICAgICBAc3dpcGU9XCJoYW5kbGVTd2lwZVwiXG4gICAgICAgICAgICBAbGF6eUxvYWRlZD1cImhhbmRsZUxhenlMb2FkZWRcIlxuICAgICAgICAgICAgQGxhenlMb2FkRXJyb3I9XCJoYW5kbGVMYXplTG9hZEVycm9yXCI+XG4gICAgICAgICAgICA8ZGl2IHYtZm9yPVwiaW1hZ2UgaW4gaW1hZ2VzXCIgOmtleT1cImltYWdlLmlkXCIgOmltYWdlcz1cImltYWdlc1wiPlxuICAgICAgICAgICAgICAgIDxhIDpocmVmPVwic2l0ZWRvbWFpbiArIGltYWdlLmZpbGVcIj48aW1nIDpzcmM9XCJzaXRlZG9tYWluICsgaW1hZ2UuZmlsZVwiIGFsdD1cIlwiPjwvYT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L1NsaWNrPlxuICAgIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCB7IElNQUdFX0dBTExFUllfUVVFUlkgfSBmcm9tICcuLi9jb25zdGFudHMvZ3JhcGhxbCdcbmltcG9ydCBTbGljayBmcm9tICd2dWUtc2xpY2snXG5pbXBvcnQgJy4uLy4uL25vZGVfbW9kdWxlcy9zbGljay1jYXJvdXNlbC9zbGljay9zbGljay5jc3MnXG5pbXBvcnQgJy4uLy4uL25vZGVfbW9kdWxlcy9zbGljay1jYXJvdXNlbC9zbGljay9zbGljay10aGVtZS5jc3MnXG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgbmFtZTogJ0ltYWdlR2FsbGVyeScsXG4gIGRhdGEgKCkge1xuICAgIHJldHVybiB7XG4gICAgICBpbWFnZXM6ICcnLFxuICAgICAgc2l0ZWRvbWFpbjogJ2h0dHA6Ly9sb2NhbGhvc3Q6ODAwMC9tZWRpYS8nLFxuICAgICAgc2xpY2tPcHRpb25zOiB7XG4gICAgICAgIHNsaWRlc1RvU2hvdzogMyxcbiAgICAgICAgaW5maW5pdGU6IHRydWUsXG4gICAgICAgIGFjY2Vzc2liaWxpdHk6IHRydWUsXG4gICAgICAgIGFkYXB0aXZlSGVpZ2h0OiBmYWxzZSxcbiAgICAgICAgYXJyb3dzOiB0cnVlLFxuICAgICAgICBkb3RzOiB0cnVlLFxuICAgICAgICBkcmFnZ2FibGU6IHRydWUsXG4gICAgICAgIGVkZ2VGcmljdGlvbjogMC4zMCxcbiAgICAgICAgc3dpcGU6IHRydWVcbiAgICAgIH1cbiAgICB9XG4gIH0sXG4gIGNvbXBvbmVudHM6IHtcbiAgICBTbGlja1xuICB9LFxuICBtZXRob2RzOiB7XG4gICAgbmV4dCAoKSB7XG4gICAgICB0aGlzLiRyZWZzLnNsaWNrLm5leHQoKVxuICAgIH0sXG5cbiAgICBwcmV2ICgpIHtcbiAgICAgIHRoaXMuJHJlZnMuc2xpY2sucHJldigpXG4gICAgfSxcblxuICAgIHJlSW5pdCAoKSB7XG4gICAgICAvLyBIZWxwZnVsIGlmIHlvdSBoYXZlIHRvIGRlYWwgd2l0aCB2LWZvciB0byB1cGRhdGUgZHluYW1pYyBsaXN0c1xuICAgICAgdGhpcy4kbmV4dFRpY2soKCkgPT4ge1xuICAgICAgICB0aGlzLiRyZWZzLnNsaWNrLnJlU2xpY2soKVxuICAgICAgfSlcbiAgICB9LFxuXG4gICAgLy8gRXZlbnRzIGxpc3RlbmVyc1xuICAgIGhhbmRsZUFmdGVyQ2hhbmdlIChldmVudCwgc2xpY2ssIGN1cnJlbnRTbGlkZSkge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZUFmdGVyQ2hhbmdlJywgZXZlbnQsIHNsaWNrLCBjdXJyZW50U2xpZGUpXG4gICAgfSxcbiAgICBoYW5kbGVCZWZvcmVDaGFuZ2UgKGV2ZW50LCBzbGljaywgY3VycmVudFNsaWRlLCBuZXh0U2xpZGUpIHtcbiAgICAgIGNvbnNvbGUubG9nKCdoYW5kbGVCZWZvcmVDaGFuZ2UnLCBldmVudCwgc2xpY2ssIGN1cnJlbnRTbGlkZSwgbmV4dFNsaWRlKVxuICAgIH0sXG4gICAgaGFuZGxlQnJlYWtwb2ludCAoZXZlbnQsIHNsaWNrLCBicmVha3BvaW50KSB7XG4gICAgICBjb25zb2xlLmxvZygnaGFuZGxlQnJlYWtwb2ludCcsIGV2ZW50LCBzbGljaywgYnJlYWtwb2ludClcbiAgICB9LFxuICAgIGhhbmRsZURlc3Ryb3kgKGV2ZW50LCBzbGljaykge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZURlc3Ryb3knLCBldmVudCwgc2xpY2spXG4gICAgfSxcbiAgICBoYW5kbGVFZGdlIChldmVudCwgc2xpY2ssIGRpcmVjdGlvbikge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZUVkZ2UnLCBldmVudCwgc2xpY2ssIGRpcmVjdGlvbilcbiAgICB9LFxuICAgIGhhbmRsZUluaXQgKGV2ZW50LCBzbGljaykge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZUluaXQnLCBldmVudCwgc2xpY2spXG4gICAgfSxcbiAgICBoYW5kbGVSZUluaXQgKGV2ZW50LCBzbGljaykge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZVJlSW5pdCcsIGV2ZW50LCBzbGljaylcbiAgICB9LFxuICAgIGhhbmRsZVNldFBvc2l0aW9uIChldmVudCwgc2xpY2spIHtcbiAgICAgIGNvbnNvbGUubG9nKCdoYW5kbGVTZXRQb3NpdGlvbicsIGV2ZW50LCBzbGljaylcbiAgICB9LFxuICAgIGhhbmRsZVN3aXBlIChldmVudCwgc2xpY2ssIGRpcmVjdGlvbikge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZVN3aXBlJywgZXZlbnQsIHNsaWNrLCBkaXJlY3Rpb24pXG4gICAgfSxcbiAgICBoYW5kbGVMYXp5TG9hZGVkIChldmVudCwgc2xpY2ssIGltYWdlLCBpbWFnZVNvdXJjZSkge1xuICAgICAgY29uc29sZS5sb2coJ2hhbmRsZUxhenlMb2FkZWQnLCBldmVudCwgc2xpY2ssIGltYWdlLCBpbWFnZVNvdXJjZSlcbiAgICB9LFxuICAgIGhhbmRsZUxhemVMb2FkRXJyb3IgKGV2ZW50LCBzbGljaywgaW1hZ2UsIGltYWdlU291cmNlKSB7XG4gICAgICBjb25zb2xlLmxvZygnaGFuZGxlTGF6ZUxvYWRFcnJvcicsIGV2ZW50LCBzbGljaywgaW1hZ2UsIGltYWdlU291cmNlKVxuICAgIH1cbiAgfSxcbiAgYXBvbGxvOiB7XG4gICAgaW1hZ2VzOiB7XG4gICAgICBxdWVyeTogSU1BR0VfR0FMTEVSWV9RVUVSWVxuICAgIH1cbiAgfSxcbiAgbW91bnRlZCAoKSB7XG4gICAgICBjb25zb2xlLmxvZygnbW91bnRkJylcbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjxzdHlsZT5cblxuPC9zdHlsZT5cblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBJbWFnZUdhbGxlcnkudnVlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUF3QkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBVEE7QUFIQTtBQWVBO0FBQ0E7QUFBQTtBQUNBO0FBREE7QUFHQTtBQUNBO0FBQ0E7QUFDQTtBQUVBO0FBQ0E7QUFDQTtBQUVBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFqREE7QUFtREE7QUFDQTtBQUNBO0FBREE7QUFEQTtBQUtBO0FBQ0E7QUFDQTtBQWhGQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/ImageGallery.vue\n");

/***/ })

})

webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')


function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'jquery': resolve('node_modules/jquery/dist/jquery')
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 3000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 3000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 3000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

Answer 1 · 2018-08-28T19:49:49.000Z

Solution:

   beforeUpdate() {
        if (this.$refs.slick) {
            this.$refs.slick.destroy();
        }
    },
    updated() {
        this.$nextTick(function () {
            if (this.$refs.slick) {
                this.$refs.slick.create(this.slickOptions);
            }
        });
    },