Init does not show cookie prompt again

[garbit]

Hi there,

I'm trying to re-show the cookie prompt in order to allow the user to either accept / reject the cookie prompt again however the .init() function doesn't seem to be showing the prompt window again.

Workflow is as follows: Show cookie prefs anchor is clicked >SHOWCOOKIEPROMPT event emitted > showCookieConsent method called > this.$refs.myPanel1.init();

I can see the events being emitted in the vue dev tools however it looks like the event is being emitted multiple times. It also looks like the event :

Link

Thanks in advance,

Andy

Code:

<template lang="pug">
  .testing-cookie
    vue-cookie-accept-decline(
        :ref="'myPanel1'"
        :elementId="'myPanel1'"
        :debug="false"
        :position="'bottom-right'"
        :type="'floating'"
        :disableDecline="false"
        :transitionName="'slideFromBottom'"
        @status="cookieStatus"
        @clicked-accept="cookieClickedAccept"
        @clicked-decline="cookieClickedDecline"
        @removed-cookie="cookieRemovedCookie"
      )
</template>

<script>
import * as MUTATIONS from '@/const/mutations';
import VueCookieAcceptDecline from 'vue-cookie-accept-decline';
import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css';
import EventsMixin from '@/mixins/Events';
import { eventBus } from '../../main';

export default {
  components: {
    VueCookieAcceptDecline,
  },
  mixins: [EventsMixin],
  mounted() {
    this.listenFor('SHOWCOOKIEPROMPT', this.showCookieConsent, eventBus);
  },
  methods: {
    cookieStatus() {
      return this.$store.getters.cookieStatus;
    },
    cookieClickedAccept() {
      this.$store.commit(MUTATIONS.ACCEPT_COOKIE);
    },
    cookieClickedDecline() {
      this.$store.commit(MUTATIONS.DECLINE_COOKIE);
      // this.$refs.myPanel1.removeCookie();
      // this.$refs.myPanel1.init();
    },
    showCookieConsent() {
      console.log('SHOW COOKIE CONSENT');
      console.log(this.$refs.myPanel1.init());
      this.$refs.myPanel1.init();
    },
    cookieRemovedCookie() {
      console.log('here in cookieRemoved');
      // this.$refs.myPanel1.init();
    },
  },
};
</script>

<style scoped>
</style>

[johndatserakis]

Hey there - sorry you're having trouble.

To remove the cookie so you can show the panel again, you can use the method this.$refs.myPanel1.removeCookie(). This will physically remove the cookie.

Then, listen for the removed-cookie event that will be emitted, which in your example you have connected to cookieRemovedCookie, and run this.$refs.myPanel1.init() to bring the panel back up so the user can choose again.

The example page shows a good example of the whole process - https://github.com/promosis/vue-cookie-accept-decline/blob/master/example/App.vue

Let me know how it goes - we'll adjust it from there if we need to.

[johndatserakis]

Did this end up working for you?

Edit - Will close for now - let us know if you need any further help with this.