Saya mempunyai tiga fail animasi json pemain lottie - congratulations1.json, congratulations2.json and congratulations3.json Animasi adalah seperti berikut:

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

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

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

Nota: Laluan ke fail json disebut dalam src teg pemain lottie ini.

Saya mahu memaparkan butang individu secara rawak apabila ia diklik.

Perkara yang telah saya lakukan:

Saya menggunakan tiga pembolehubah untuk setiap satu daripada tiga animasi. Pembolehubahnya ialah - showPlayer1, showPlayer2 dan showPlayer3. Saya menyimpannya dalam tatasusunan yang dipanggil showPlayer dan menetapkan nilainya kepada palsu. Saya tidak tahu sama ada program saya betul. Saya tidak tahu apa yang perlu dilakukan seterusnya.

Susunan saya:

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

Saya telah melakukan ini. Saya tidak tahu apa yang perlu dimasukkan ke dalam label butang untuk memaparkan ketiga-tiga animasi ini secara rawak daripada tatasusunan. tolong bantu.

Kod dikemas kini:

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