Vue.js에서 버튼을 클릭하면 애니메이션이 무작위로 생성됩니다.

Question

3개의 로티 플레이어 json 애니메이션 파일(congratulations1.json, congratulations2.json 및 congratulations3.json)이 있습니다. 애니메이션은 다음과 같습니다.

축하합니다 1:

으아아아

축하합니다 2:

으아아아

축하합니다 3:

으아아아

참고: json 파일의 경로는 이러한 lottie-player 태그의 src에 언급되어 있습니다.

클릭 시 개별 버튼을 무작위로 표시하고 싶습니다.

내가 한 일:

세 가지 애니메이션 각각에 세 가지 변수를 사용했습니다. 변수는 showPlayer1, showPlayer2 및 showPlayer3입니다. showPlayer라는 배열에 저장하고 값을 false로 설정합니다. 내 프로그램이 맞는지 모르겠습니다. 다음에 무엇을 해야할지 모르겠습니다.

내 배열:

으아아아

저는 해냈습니다. 이 세 가지 애니메이션을 배열에서 무작위로 표시하려면 버튼 레이블 안에 무엇을 포함해야 할지 모르겠습니다. 도와주세요.

업데이트된 코드:

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

Answer 1

아래에서 볼 수 있듯이 이를 달성하는 다른 여러 가지 방법이 있습니다. 하지만 제안한 대로 수행하려면 showPlayer를 부울 배열로 사용하지 않고 숫자로 사용하겠습니다.

으아악

이 문제를 해결하는 방법은 여러 가지가 있습니다. 하나의 컴포넌트만 사용하고 소스를 전환하려는 경우 다음을 수행할 수 있습니다. 먼저 구성 요소의 src를 변수로 설정합니다.

으아악

다음과 같이 data()의 문자열을 사용하여 배열을 설정합니다.

으아악

그런 다음 다음과 같이 RandomButton에 대한 메서드를 설정합니다.

으아악

저는 매우 빠르게 코드샌드박스를 해독했습니다. https://codesandbox.io/s/elastic-dijkstra-o7ety?file=/src/comComponents/HelloWorld.vue

vue에서 :is 속성을 사용하여 동적 구성 요소를 로드하고 코드에 로드할 구성 요소를 설정할 수도 있습니다. https://v2.vuejs.org/v2/guide/comComponents-dynamic async.html