Vue.js で、ボタンをクリックしてアニメーションをランダムに生成します

Question

lottie プレーヤーの JSON アニメーション ファイルが 3 つあります - congratulations1.json、congratulations2.json、congratulations3.json アニメーションは次のとおりです。

おめでとうございます 1:

リーリー

おめでとうございます 2:

リーリー

おめでとうございます 3:

リーリー

注: json ファイルへのパスは、これらの Lottie-player タグの src に記載されています。

単一のボタンをクリックしたときにランダムに表示したい。

私がやったこと:

3 つのアニメーションごとに 3 つの変数を取得しました。変数は、showPlayer1、showPlayer2、および showPlayer3 です。 これらを showPlayer という配列に保存し、値を false に設定します。私のプログラムが正しいかどうかわかりません。 次に何をすればいいのか分かりません。

私の配列:

リーリー

これをやりました。これら 3 つのアニメーションを配列からランダムに表示するには、ボタンのラベル内に何を含めればよいかわかりません。助けてください。

更新されたコード:

ああああ

Answer 1

以下に示すように、これを実現するには他にも複数の方法があります。ただし、あなたが提案したことを実行したい場合は、showPlayer をブール配列としてではなく、数値として使用します。

リーリー

この問題を解決するには複数の方法があります。 1 つのコンポーネントのみを使用してソースを切り替える場合は、次の手順を実行できます。 まず、コンポーネントの src を変数に設定します:

リーリー

data() の文字列を使用して次のように配列を設定します。

リーリー

次に、randomButton のメソッドを次のように設定します。 リーリー

コードサンドボックスをすぐに解読しました。

https://codesandbox.io/s/elastic -dijkstra-o7ety?file=/src/components/HelloWorld.vue

vue の :is 属性を使用して動的コンポーネントをロードし、コード内でロードするコンポーネントを設定することもできます。

https://v2.vuejs.org/v2/guide/components-dynamic async.html