Dalam Vue.js, klik butang untuk menjana animasi secara rawak

Question

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>

Answer 1

Seperti yang saya tunjukkan di bawah, terdapat pelbagai cara lain untuk mencapai matlamat ini. Tetapi jika anda mahu melakukan apa yang anda cadangkan, saya tidak akan menggunakan showPlayer sebagai tatasusunan boolean, tetapi sebagai nombor.

sssccc

Terdapat banyak cara untuk menyelesaikan masalah ini. Jika anda hanya mahu menggunakan satu komponen dan menukar sumber, anda boleh melakukan perkara berikut: Mula-mula, tetapkan src komponen sebagai pembolehubah:

;

Sediakan tatasusunan menggunakan rentetan dalam data() seperti ini:

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

Kemudian tetapkan kaedah untuk randomButton seperti ini:

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

Saya memecahkan kotak pasir kod dengan cepat: https://codesandbox.io/s/elastic-dijkstra-o7ety?file=/src/components/HelloWorld.vue

Anda juga boleh menggunakan atribut :is in vue untuk memuatkan komponen dinamik dan menetapkan komponen mana yang hendak dimuatkan dalam kod. https://v2.vuejs.org/v2/guide/components-dynamic async.html