Dans Vue.js, cliquez sur un bouton pour générer aléatoirement des animations

Question

J'ai trois fichiers d'animation json du joueur de lottie - congratulations1.json, congratulations2.json et congratulations3.json Les animations sont les suivantes :

Félicitations 1 :

<lottie-player
          v-if="showPlayer1"
          class="justify-content-center"
          src="../../../congratulations.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Félicitations 2 :

<lottie-player
          v-if="showPlayer2"
          class="justify-content-center"
          src="../../../congratulations2.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Félicitations 3 :

<lottie-player
          v-if="showPlayer3"
          class="justify-content-center"
          src="../../../congratulations3.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Remarque : Le chemin d'accès au fichier json est mentionné dans le src de ces balises lottie-player.

Je souhaite afficher les boutons individuels de manière aléatoire lorsqu'ils sont cliqués.

Choses que j'ai faites :

J'ai utilisé trois variables pour chacune des trois animations. Les variables sont - showPlayer1, showPlayer2 et showPlayer3. Je les enregistre dans un tableau appelé showPlayer et je définis leur valeur sur false. Je ne sais pas si mon programme est correct. Je ne sais pas quoi faire ensuite.

Ma gamme :

<script>
export default {
  data() {
    return {
      showPlayer: [
        (showPlayer1 = false),
        (showPlayer2 = false),
        (showPlayer3 = false),
      ],
    };
  },

J'ai fait ça. Je ne sais pas quoi inclure dans l'étiquette du bouton pour afficher ces trois animations de manière aléatoire à partir du tableau. s'il vous plaît, aidez-moi.

Code mis à jour :

<div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 1"
          class="justify-content-center"
          src="../../../congratulations.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>
      <div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 2"
          class="justify-content-center"
          src="../../../congratulations_2.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>
      <div class="justify-content-center anim">
        <lottie-player
          v-if="showPlayer === 3"
          class="justify-content-center"
          src="../../../congratulations_3.json"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;
      </div>

Answer 1

Comme je le montre ci-dessous, il existe plusieurs autres façons d'y parvenir. Mais si vous voulez faire ce que vous avez suggéré, je n'utiliserais pas showPlayer comme tableau booléen, mais comme nombre.

sssccc

Il existe de nombreuses façons de résoudre ce problème. Si vous souhaitez utiliser un seul composant et changer de source, vous pouvez procéder comme suit : Tout d'abord, définissez le src du composant comme variable :

;

Configurez un tableau en utilisant les chaînes dans data() comme ceci :

animations: [
    '../../../congratulations.json',
    '../../../congratulations2.json',
    '../../../congratulations3.json',
  ],
  animationSrc: ''

Ensuite, définissez une méthode pour randomButton comme ceci :

onRandomButtonPress() {
  this.animationSrc = this.animations[Math.floor(Math.random()*this.animations.length)];
},

J'ai cracké une codeandbox très rapidement : https://codesandbox.io/s/elastic-dijkstra-o7ety?file=/src/components/HelloWorld.vue

Vous pouvez également utiliser l'attribut :is dans vue pour charger des composants dynamiques et définir le composant à charger dans le code. https://v2.vuejs.org/v2/guide/components-dynamic async.html