JavaScript - スワイパー画像をスワイプできません

Question

質問の件名は、要求されたデータがなかったため Vue で書かれていたため、偽のデータが作成されました: これは動的に生成された img タグであり、ページ上で使用されます: しかし、Chrome を開いて効果を見ると、これはスワイプできず、最初の画像しか表示されないということですが、その写真の動的生成された画像も以下のように正しい構造になっているのですが、なぜ描画できないのでしょうか...

曾经蜡笔没有小新 · Answer

イベントはバインドされていない可能性があります。マウントされたライフサイクルに新しいスワイパーを追加してみるか、vue-swiper を使用して他のユーザーによってカプセル化することができます。

我想大声告诉你 · Answer

理由は十分に詳しく説明されていませんが、「動的生成」領域にあるのではないかと推測することしかできません。これは、イベントを要素にバインドし、動的に生成された要素に対して従来のメソッド ele.addEventListener に従っていると失敗するようなものです。

怪我咯 · Answer

元の投稿者が書いたコードで、swiper-container が繰り返し使用されているのはなぜですか? ? ?

世界只因有你 · Answer

私が書いたものをあげますので、比較してみてください
html

リーリー

js:

リーリー

代言 · Answer

swiper.update() 試してみる

代言 · Answer

理由は、swiperの初期化位置が間違っているためです。imgタグを動的に生成するには、すべてのタグがインターフェイス上にレンダリングされた後に新しいswiperを作成する必要があります。元のコードは次のとおりです。これ

リーリー

バインドされたデータソースはコンポーネントを非同期で生成するように変更されたため、スワイパーの初期化操作はコンポーネントがロードされた後のライフサイクル、つまりVueオブジェクトのマウントされた関数で実行する必要があります