MDBToast is not show up

Topic: MDBToast is not show up

karluk priority asked 2 weeks ago

Expected behavior*_show toaster on the top right corner._*Actual behavior*_nothing show up_*Resources (screenshots, code snippets etc.)

<template>
<MDBToast v-model="notification.show" :id="notification.id" autohide :delay="notification.delay" appendToBody
    position="top-right" stacking width="350px" :toast="notification.status">
    <template #title>
        {{ notification.title }}
    </template>
    <template #small>
    </template>
    {{ notification.message }}
</MDBToast>


import { MDBToast } from "mdb-vue-ui-kit";import { ref } from 'vue';import { INotification } from '../models/notification';

const props = defineProps({

notification: { type: Object as () => INotification, default: { id: "test", title: "Report", message: "Success", status: "success", delay: 5000, show: true } }}); const notification = ref(props.notification);

Add comment

karluk priority answered 5 days ago

0 0 Best answer

Please insert min. 20 characters.

Here is Parent page:

<template>
        <span v-for="(notification, i) in notifications">
            <Notification :message="notification.message" :title="notification.title" v-model="notifications[i].show"
                :delay="notification.delay" :status="notification.status" :id="notification.id" :show="notification.show" />
        </span>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import Notification from './Notification.vue'
import { useStore } from "vuex";
import { INotification } from '../models/notification';
const store = useStore();
const notifications = ref([])
watch(() => store.state.notifications.length, async () => { 
notifications.value = [...store.state.notifications]})
</script>

Bartosz Cylwik staff commented 4 days ago

I managed to use vuex to show and update the toast.

Parent

<template>
  <div v-if="store.state.notifications.length > 0">
    <span v-for="(notification, i) in store.state.notifications">
      <Notification :notify="notification" />
    </span>
  </div>
  <MDBBtn @click="handleClick">Click</MDBBtn>
</template>
<script setup lang="ts">
import Notification from "./components/HelloWorld.vue";
import { useStore } from "vuex";
import { MDBBtn } from "mdb-vue-ui-kit";

const store = useStore();

const handleClick = async () => {
  await store.dispatch("change", [
    {
      title: "Title 2",
      id: "test2",
      message: "Danger",
      status: "danger",
      delay: 5000,
      show: true,
    },
  ]);
};
</script>

Child

<template>
  <MDBToast
    v-model="content.show"
    autohide
    :delay="content.delay"
    appendToBody
    position="top-right"
    :stacking="true"
    width="350px"
    :toast="content.status"
    @close="removeNotification(content.id)"
  >
    <template #title> {{ content.title }} - {{ content.id }} </template>
    <template #small> </template>
    {{ content.message }}
  </MDBToast>
</template>

<script setup lang="ts">
import { MDBToast } from "mdb-vue-ui-kit";
import { useStore } from "vuex";
import { ref, onMounted, watch } from "vue";
const props = defineProps({
  notify: {
    type: Object,
    required: true,
  },
});
// const store = useStore();
const removeNotification = async (id: string) => {
  // await store.dispatch("removeNotification", id);
};

const content = ref({});

watch(
  () => props.notify,
  (curr) => {
    content.value = curr;
  }
);

onMounted(() => {
  content.value = props.notify;
});
</script>

Make sure to have your getters, mutations and actions properly set so that the changes will be visible in watchers.

<p>I managed to use vuex to show and update the toast.</p>

<p>Parent</p>

<pre class="prettyprint"><code><template>
  <div v-if="store.state.notifications.length > 0">
    <span v-for="(notification, i) in store.state.notifications">
      <Notification :notify="notification" />
    </span>
  </div>
  <MDBBtn @click="handleClick">Click</MDBBtn>
</template>
<script setup lang="ts">
import Notification from "./components/HelloWorld.vue";
import { useStore } from "vuex";
import { MDBBtn } from "mdb-vue-ui-kit";

const store = useStore();

const handleClick = async () => {
  await store.dispatch("change", [
    {
      title: "Title 2",
      id: "test2",
      message: "Danger",
      status: "danger",
      delay: 5000,
      show: true,
    },
  ]);
};
</script>
</code></pre>

<p>Child</p>

<pre class="prettyprint"><code><template>
  <MDBToast
    v-model="content.show"
    autohide
    :delay="content.delay"
    appendToBody
    position="top-right"
    :stacking="true"
    width="350px"
    :toast="content.status"
    @close="removeNotification(content.id)"
  >
    <template #title> {{ content.title }} - {{ content.id }} </template>
    <template #small> </template>
    {{ content.message }}
  </MDBToast>
</template>

const content = ref({});

watch(
  () => props.notify,
  (curr) => {
    content.value = curr;
  }
);

onMounted(() => {
  content.value = props.notify;
});
</script>
</code></pre>

<p>Make sure to have your getters, mutations and actions properly set so that the changes will be visible in watchers.</p>

Please insert min. 15 characters.

karluk priority commented 4 days ago

Thank you for response, Yes it shows the Toaster(s), but when the delay timeout, it won't hide, and throw an exception(I had same issue before as well). the error msg: Uncaught Error: [vuex] do not mutate vuex store state outside mutation handlers.

Bartosz Cylwik staff commented 1 day ago

We've tried to recreate your issue in a plain MDB project, and there seems to be no issue with a fresh install.

Please note, that we can only help you, if the issue is in the package itself. If the issue is caused by an external dependency or custom code, this would be out of product support scope.

We can provide broader consulting, or a video session as a separate service. If you're interested, please reach out to services@mdbootstrap.com & describe your issue in detail.

karluk priority commented 1 day ago

Hi there,

Based on your feedback, I checked my mdb-vue-ui-kits version and it was 3.1.1, and I upgraded to 4.1.1. After update it, I have an issue. my application won't start up. I received an error said: Uncaught SyntaxError: ambiguous indirect export: MDBSideNavMenu.

Please I need help as soon as possible.

Thank you

karluk priority commented 1 day ago

Hi Bartosz,

I updated my package.json file based on your github example, and the application back to normal, but the Toaster throw exception after delay time out. I don't see any example you are using with vuex. Any suggestion please?

Here is my package.json file "dependencies": { "dotenv": "^16.3.1", "mdb-vue-calendar": "./plugins/mdb-vue-calendar-3.2.0.tgz", "mdb-vue-file-upload": "./plugins/mdb-vue-file-upload-2.2.0.tgz", "mdb-vue-table-editor": "./plugins/mdb-vue-table-editor-2.2.0.tgz", "mdb-vue-ui-kit": "./mdb/mdb-vue-ui-kit-4.1.1.tgz", "vue": "^3.2.40", "vue-router": "^4.1.5", "vuex": "^4.0.2" }, "devDependencies": { "@types/node": "^20.8.6", "@vitejs/plugin-vue": "^3.1.0", "sass": "^1.52.1", "typescript": "^4.6.4", "vite": "^3.1.0", "vue-tsc": "^0.40.4" }

Please insert min. 15 characters.

Bartosz Cylwik staff commented 21 hours ago

You can find example with vuex in my comment above.

karluk priority commented 12 hours ago

Hello Bartosz,

I don't see any usage vuex data in your Toaster example. Have you ever try it with Vuex please?

Thank you,

Add comment

karluk priority answered 5 days ago

0 0 Best answer

Please insert min. 20 characters.

Here is the child page:

<template>
    <MDBToast v-model="notify.show" autohide :delay="notify.delay" appendToBody position="top-right" :stacking="true"
        width="350px" :toast="notify.status" @close="removeNotification(notify.id)">
        <template #title>
            {{ notify.title }} - {{ notify.id }}
        </template>
        <template #small>
        </template>
        {{ notify.message }}
    </MDBToast>
</template>

<script setup lang="ts">
import { MDBToast } from "mdb-vue-ui-kit";
import { INotification } from '../models/notification';
import { useStore } from "vuex";
const notify = defineProps<INotification>()
const store = useStore();
const removeNotification = async (id: string) => {
    await store.dispatch('removeNotification', id)
}
</script>

Add comment

karluk priority answered 2 weeks ago

0 0 Best answer

Hello Bartosz,

In your example, you created a component, but I don't see any any parent page for using your component at all. How does it work with parent page, please?

Bartosz Cylwik staff commented 2 weeks ago

I cannot add another component with use of snippets, but when I've changed the value inside the parent component the Toast was triggering properly. I only used the button in my snippet to show how the opening/closing works in this case.

Were you able to implement the watcher in your application?

Add comment

karluk priority answered 2 weeks ago

0 0 Best answer

Hello Bartosz,

Or I want to show/hide the Toaster based on the computed state value. So, the Toaster will be in the page, when the state value change it will shows up until the delay time up.

Thank you,

Bartosz Cylwik staff commented 2 weeks ago

Hi! Using the watcher didn't help at all? Watching for prop changes should solve the issue. If the value changes inside the same component that we used Toast in, then assigning the ref/computed value to the Toast's v-model should also work.

Is there any chance you could show us some code here or in a snippet?
https://mdbootstrap.com/snippets

karluk priority commented 6 days ago

Basically, I have a Toaster component in my page(SPA), and based on user actions, I want to show toasters. So, each action add values to state, and the toaster watch the state value(list), and show toaster(s).

Bartosz Cylwik staff commented 6 days ago

I've prepared some code with example on how to watch for the changes of a ref value and display them on a screen. Buttons are changing the ref that we pass to the child. I used the same watcher I used in the snipped from before. Let me know if this helps.

Parent

<template>
  <HelloWorld :notification="notification" />
  <MDBBtn color="primary" @click="triggerAction">Trigger action</MDBBtn>
  <MDBBtn
    color="primary"
    @click="
      () => (notification = { ...notification, show: !notification.show })
    "
    >Toggle toast</MDBBtn
  >
</template>
<script setup lang="ts">
import { MDBBtn } from "mdb-vue-ui-kit";
import HelloWorld from "../components/HelloWorld.vue";
import { ref } from "vue";

const notification = ref({
  id: "test",
  title: "Report",
  message: "Success",
  status: "success",
  delay: 5000,
  show: true,
});

const id = ref(0);

const triggerAction = () => {
  notification.value = {
    id: `test ${id.value++}`,
    title: `Report ${id.value}`,
    message: id.value % 2 ? "danger" : "success",
    status: id.value % 2 ? "danger" : "success",
    delay: 5000,
    show: true,
  };
};
</script>

Child

<template>
  <MDBToast
    v-model="notification.show"
    :id="notification.id"
    autohide
    :delay="notification.delay"
    appendToBody
    position="top-right"
    stacking
    width="350px"
    :toast="notification.status"
  >
    <template #title>
      {{ notification.title }}
    </template>
    <template #small> </template>
    {{ notification.message }}
  </MDBToast>
</template>

<script>
import { MDBToast, MDBBtn } from "mdb-vue-ui-kit";

import { ref, onMounted, watch } from "vue";

export default {
  name: "App",
  components: {
    MDBToast,
    MDBBtn,
  },
  props: {
    notification: {
      type: Object,
      default: {
        id: "test",
        title: "Report",
        message: "Success",
        status: "success",
        delay: 5000,
        show: true,
      },
    },
  },
  setup(props) {
    const notification = ref({});

    watch(
      () => props.notification,
      (curr) => {
        notification.value = curr;
      }
    );

    onMounted(() => {
      notification.value = props.notification;
    });

    return {
      notification,
    };
  },
};
</script>

<p>I've prepared some code with example on how to watch for the changes of a ref value and display them on a screen. Buttons are changing the ref that we pass to the child. I used the same watcher I used in the snipped from before. Let me know if this helps.</p>

<p>Parent</p>

<pre class="prettyprint"><code><template>
  <HelloWorld :notification="notification" />
  <MDBBtn color="primary" @click="triggerAction">Trigger action</MDBBtn>
  <MDBBtn
    color="primary"
    @click="
      () => (notification = { ...notification, show: !notification.show })
    "
    >Toggle toast</MDBBtn
  >
</template>
<script setup lang="ts">
import { MDBBtn } from "mdb-vue-ui-kit";
import HelloWorld from "../components/HelloWorld.vue";
import { ref } from "vue";

const notification = ref({
  id: "test",
  title: "Report",
  message: "Success",
  status: "success",
  delay: 5000,
  show: true,
});

const id = ref(0);

const triggerAction = () => {
  notification.value = {
    id: `test ${id.value++}`,
    title: `Report ${id.value}`,
    message: id.value % 2 ? "danger" : "success",
    status: id.value % 2 ? "danger" : "success",
    delay: 5000,
    show: true,
  };
};
</script>
</code></pre>

<p>Child</p>

<pre class="prettyprint"><code><template>
  <MDBToast
    v-model="notification.show"
    :id="notification.id"
    autohide
    :delay="notification.delay"
    appendToBody
    position="top-right"
    stacking
    width="350px"
    :toast="notification.status"
  >
    <template #title>
      {{ notification.title }}
    </template>
    <template #small> </template>
    {{ notification.message }}
  </MDBToast>
</template>

import { ref, onMounted, watch } from "vue";

export default {
  name: "App",
  components: {
    MDBToast,
    MDBBtn,
  },
  props: {
    notification: {
      type: Object,
      default: {
        id: "test",
        title: "Report",
        message: "Success",
        status: "success",
        delay: 5000,
        show: true,
      },
    },
  },
  setup(props) {
    const notification = ref({});

watch(
      () => props.notification,
      (curr) => {
        notification.value = curr;
      }
    );

onMounted(() => {
      notification.value = props.notification;
    });

return {
      notification,
    };
  },
};
</script>
</code></pre>

Please insert min. 15 characters.

karluk priority commented 5 days ago

I added parent and child pages what I have. Please check above. In the parent page you can see the loop, because I want to display multi notifications.

Thank you,

Add comment

karluk priority answered 2 weeks ago

0 0 Best answer

Hello Bartosz,

Basically, I want to show/hide my Toaster based on the property value. Not only display one time.

Thank you,

Bartosz Cylwik staff commented 2 weeks ago

You can use a watcher for that. Watch the changes on the props.notification value and then update the ref value.

I have updated my snippet and added the watcher. The button in this snippet is beeing added on the same component so the watch doesn't trigger there (prop is not changing) but I have tested this in a new vue app and it works correctly with props aswell

https://mdbootstrap.com/snippets/vue/b-cylwik/5794125#js-tab-view

Hope that helps!

Please insert min. 15 characters.

Add comment

Bartosz Cylwik staff answered 2 weeks ago

0 0 Best answer

Hello! Try assigning the prop.notification value to the notification ref variable after the component mounts - for example in a onMounted hook. Something like that:

https://mdbootstrap.com/snippets/vue/b-cylwik/5794125#js-tab-view

Best Regards!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Priority
Premium support: Yes
Technology: MDB Vue
MDB Version: MDB5 4.1.1
Device: Macbook
Browser: Firefox
OS: OS
Provided sample code: No
Provided link: No

karluk

0Support score
2Questions 6Answers 0Snippets