[Vuejs]-Generate animations randomly on button click in vue.js

by

0👍

✅

As I’ve shown below there are serveral other ways to achieve this. But if you want to do it like you suggest I would not use showPlayer as an array of boolean but rather as a number.

<template>
<div v-if="showPlayer === 1"> DIV 1 </div>
<div v-if="showPlayer === 2"> DIV 3 </div>
<div v-if="showPlayer === 3"> DIV 3 </div>
<button @click="onRandomButtonPress">Random!</button>
</template>
<script>
export default {
  data() {
    return {
      showPlayer: 1
    };
  },
methods: {
onRandomButtonPress() {
  this.showPlayer = Math.floor(Math.random()*3 + 1);
},
}
</script>

There are multiple ways to deal with this. If you only want to use one component and toggle the source you can do something like this:
First, set the src of your components to a variable:

<lottie-player
          class="justify-content-center"
          :src="animationSrc"
          background="transparent"
          speed="1"
          style="width: 300px; height: 300px"
          loop
          controls
          autoplay
        ></lottie-player
        >;

Set an array with the strings you have in your data() like this:

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

Then set a methon for the randomButton like this:

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

I have hacked a codesandbox together real quick:
https://codesandbox.io/s/elastic-dijkstra-o7ety?file=/src/components/HelloWorld.vue

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

Leave a comment