In Vue.js, click a button to randomly generate animations

Question

I have three lottie player json animation files - congratulations1.json, congratulations2.json and congratulations3.json The animations are as follows:

Congratulations 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
        >;

Congratulations 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
        >;

Congratulations 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
        >;

Note: The path to the json file is mentioned in the src of these lottie-player tags.

I want to display them randomly when a single button is clicked.

Things I’ve done:

I took three variables for each of the three animations. The variables are - showPlayer1, showPlayer2 and showPlayer3. I save them in an array called showPlayer and set their value to false. I don't know if my program is correct. I don't know what to do next.

My array:

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

I've done this. I don't know what to include inside the button label to display these three animations randomly from the array. please help.

Updated code:

<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

As I show below, there are multiple other ways to achieve this. But if you want to do what you suggested, I wouldn't use showPlayer as a boolean array, but as a number.

sssccc

There are multiple ways to solve this problem. If you only want to use one component and switch sources, you can do the following: First, set the component's src to a variable:

;

Set an array using the string in data() as follows:

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

Then set a method for randomButton as follows:

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

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

You can also use the :is attribute in vue to load dynamic components and set which component to load in the code. https://v2.vuejs.org/v2/guide/components-dynamic async.html