[Notification] context of custom content

[franzus5]

Hi! I'm not sure is it bug or missing. So, if we're using Notifications with custom component - in that component we have no access to global context at all (e.g. vuex, i18n...)

[luisDanielRoviraContreras]

you can give me an example in code or a codesandbox to understand better

[franzus5]

@luisDanielRoviraContreras using your example: Main.vue

this.$vs.notification({
        color: 'success',
        duration: 'none',
        width: 'auto',
        content: NotificationCustom,
        position: 'bottom-center'
      });

NotificationCustom.vue

<template>
  <div class="con-user-example">
    <header>
      <p>
         {{ $t('notification.header') }} <!-- undefined _$t function -->
      </p>

      <vs-avatar-group max="7">
        <vs-avatar v-for="user in list" :key="user.id">
          <img :src="user.url" alt="">
        </vs-avatar>
      </vs-avatar-group>
    </header>

    <div class="content-user">
      <p>
        <b>Sally Willis</b> liked your post and <b>9</b> other users
      </p>
      <vs-button dark transparent icon>
        <i class='bx bx-chevron-right'></i>
      </vs-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('users', { // <-- here we're got an 'NoModuleDefinedStore', so this.$store - undefined
      list: 'getUsers'
    })
  }
}
</script>

If we do console.log(this) - we got this context for parent VsNotification component and all global $ variables are undefined

Refs: https://github.com/lusaxweb/vuesax-next/blob/master/packages/docs/.vuepress/components/Notification/user.vue

Sorry, I can't give you sandbox or something like that, because this code unreachable. And if you're using some global variables things (especial - vuex) - all UI part blocking

[luisDanielRoviraContreras]

I think we could solve it with a property like self where you pass the this and thus we save the scope to use it within the notification, let me try it and let you know

[empty333]

I also encountered this problem, can you write more details how else did you solve it? or give a link to the sandbox. Thanks

[franzus5]

@empty333 sorry, but I'm still waiting for new release with bugfixes

[empty333]

I have a notification about the site's use of cookies. I found a method that solves my problem at the time of the new release. Maybe this will help someone. It's not exactly elegant,but it works. I hid the close button using buttonClose: false and hung the desired method on the notification click using the onClick function. I also added clickClose: true to close the notification when clicked.

const cook = this.$vs.notification({ duration: "none", content: cookieInfo, clickClose: true, buttonClose: false, onClick: () => { this.$cookies.set('cookie_info', false) }, })

[halilyuce]

Is there any progress on this?