webpack前回、vue.js版のSlickに関して基本的な使い方を簡単に紹介(下記記事参照)させていただきましたが、axiosで非同期通信をしたり画像をプリロードしてからv-for文等で動的にコンテンツを生成した場合に、Slickを適用しようとすると正常に動作してくれない問題に直面にしたので、今回はその解決方法を備忘録も兼ねて紹介したいと思います。【Vue.js】スライダー実装プラグイン「Slick」の基本的な使い方javascriptのスライダー系プラグインとして有名な「slick」。まとめ環境まず、今回の環境ですが前回同様下記の環境を前提に進めていきたいと思います。v10.12.0Webpackのインストール、構築方法は下記記事で紹介しています。関連記事Webpackを使ってVue.jsのSPA環境を簡単に構築をするどうも、こんにちわ。気づけば2019年もあっという間に3月ですね。この間年が開けたような気もするのですが。...画像をプリロードしてv-for文で動的生成するでは、まず下記のようなサンプルファイルを作成してみたいと思います。1;}</style>このファイルの内容と流れは下記のようになっています。基本的な概要は上記の通りとなっており、imgタグを囲っているdivには「photo」というクラス名を付与してデフォルトでは透明度を0にして、全ての画像のプリロードが完了した段階で見えるようにしています。Slickを適用してみるでは、このサンプルファイルにSlickを適用してみたいと思いますが、まず公式に記載されている方法から推測して下記のように記述してみたいと思います。ちなみに、この記述では正常に動作しません。1;}</style>こんな感じでv-for文でループさせた対象コンテンツをslickタグで囲んで、動画のプリロードが完了した段階で、公式のGithubに記載されているreInit()関数を実行するようにしました。lists」とコメントアウトで記載があるように、動的生成したリストを再定義する関数のように思いますが、これだと正常に表示してくれないんですね。生成されたソースコードを見てみると、v-for文で生成したリストがごっそりなくなって何も表示されない状態になってしまいます。これがバグなのか説明不足で何か他の処理が必要なのかはわかりませんが、公式だけ見ただけだとこのように記述する人も多いかと思います。解決した方法では、どうすればいいのかということで、個人的に試行錯誤してたどり着いた方法が下記になります。1;}</style>この方法を簡単にまとめると下記のようになります。解決方法のポイントwatchでloadedPhotosを監視するloadedPhotosがアップデートされたらreInit()を実行reSlick()関数は使わずslick.destroy()で初期化slick.create()関数で再描画slick.goTo()で最初のスライドに戻すこういった流れになります。一応これで解決というか求めていたような結果になりました。ポイントはv-forでループさせたい配列データをWatchで監視することと、reSlick()ではなくslick.create()関数を使うことですね。まとめということで、今回はVue.js版のSlickのバグかどうかはわかりませんが、非同期通信や画像のプリロード後にslickを適用する場合に起こる不具合の解決方法を紹介させていただきました。この方法が正しい方法かどうか分かりませんし、もっとスマートな方法もありそうな気もするので、もっと良い方法がある場合は是非教えてください〜。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。