event only fires once

[sjoerdoudman]

Hi Valgeir,

Ik have tried to implement this in a Laravel/Inertia/Vue3 environment using exactly the example code you provided, But using a button to fire the event does not work. It only fires (or 'explodes' if you will) upon mounting the component. Here are my dependencies:

{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@inertiajs/inertia": "^0.11.0", "@inertiajs/inertia-vue3": "^0.6.0", "@inertiajs/progress": "^0.2.6", "@tailwindcss/forms": "^0.4.1", "@tailwindcss/typography": "^0.5.2", "@vue/compiler-sfc": "^3.2.31", "autoprefixer": "^10.4.2", "axios": "^0.21", "laravel-mix": "^6.0.43", "lodash": "^4.17.19", "postcss": "^8.4.8", "postcss-import": "^12.0.1", "tailwindcss": "^3.0.23", "vue": "^3.2.31", "vue-loader": "^16.1.2" }, "dependencies": { "@babel/polyfill": "^7.12.1", "@headlessui/vue": "^1.5.0", "@heroicons/vue": "^1.0.6", "@inertiajs/progress": "^0.2.7", "@inertiajs/server": "^0.1.0", "@vue/server-renderer": "^3.2.31", "animated-scroll-to": "^2.2.0", "aos": "^3.0.0-beta.6", "canvas-confetti": "^1.5.1", "laravel-vue-i18n": "^1.2.0", "moment": "^2.29.1", "swiper": "^8.0.7", "vue-confetti-explosion": "^1.0.1", "vue-cookie-next": "^1.3.0", "vuex": "^4.0.2", "webpack-node-externals": "^3.0.0" } }

[Valgeir Björnsson]

It's supposed to explode when mounted. You have to implement some logic around that. Did you try the following?

<script setup>
  import { nextTick, ref } from "vue";
  import ConfettiExplosion from "vue-confetti-explosion";

  const visible = ref(false);

  const explode = async () => {
    visible.value = false;
    await nextTick();
    visible.value = true;
  };
</script>

<template>
  <div>
    <button @click="explode">Show confetti</button>
    <ConfettiExplosion v-if="visible" />
  </div>
</template>

[sjoerdoudman]

Oh... sorry man, consider this issue never raised. I have just discovered an issue in my code. I somehow removed the v-if=visible when adding some options in my component. A facepalm moment. Sorry for this. It is all working fine and looking fun.

[Valgeir Björnsson]

No problem, happens regularly to all of us 😄