We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

access Toast instance from child component

Thread ID:

Created:

Updated:

Platform:

Replies:

147542 Sep 15,2019 03:40 PM UTC Oct 3,2019 05:23 AM UTC Vue 13
loading
Tags: Toast
Thin D
Asked On September 15, 2019 03:40 PM UTC

Hello there,

I can access Toast instance with structure <Root><App><ToastComponent> with code this.$root.$children[0].$refs.toastRef.show()



Could you advise how to access toast instance with structure <Root><App><Layout><ToastComponent>



Thanks and best regards,
TD.



Pandiyaraj Muniyandi [Syncfusion]
Replied On September 17, 2019 04:48 PM UTC

Hi Thin, 
 
Greetings from Syncfusion support. 
 
We have achieved your requirement of access Toast component from App (Root or parent) component and prepared sample for your reference, check this below link 
 
In the above sample we have covered following items 
 
  • Root component consider as App.vue
  • Second level component as Layout.vue and all other components are child component of that component
  • To access toast component use like below
 
 
     this.$refs.layout.$refs.toastRef.show(); 
 
 
  • this.$refs.layout – access child component reference
  • this.$refs.layout.$refs.toastRef – access toast reference from child component of layout component
 
 
 
Regards, 
Pandiyaraj M 


Thin D
Replied On September 22, 2019 05:48 AM UTC

Thanks for your help.

I try to access toast component in child component of AppMain component ( fourth level component) or RightPanel component.

Please check my sample at https://codesandbox.io/s/vue-template-8xxyf based on your sample.


Thanks,
TD.

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 23, 2019 11:03 AM UTC

Hi Thin, 
Good day to you. 
We have checked the shared sample. Yes, you can invoke the parent component by emiting event from child component (Child to parent component interaction). So, now you can access Toast component’s show() method from parent component. 
 
We have attached a sample for your reference by satisfying your requirement, 
 
 
layout.vue 
bind event to AppMain child component as appMainClicked to get and do an action from child to parent 
<template> 
<div> 
    <AppMain @appMainClicked="showToast"/> 
    <ejs-toast 
    ref="toastRef" 
    title="Matt sent you a friend request" 
    content="Hey, wanna dress up as wizards and ride our hoverboards?" 
    ></ejs-toast> 
</div> 
</template> 
   
<script> 
    export default { 
        name: "Layout", 
        methods: { 
            showToast() { 
                this.$refs.toastRef.show(); 
            } 
        } 
    }; 
</script> 
 
 
AppMain.vue 
emit the event to parent for invoke Toast show  
<template> 
    <div> 
        AppMain 
        <button v-on:click="onClick">Show Toast in child component</button> 
    </div> 
</template> 
       
<script> 
    export default { 
    name: "AppMain", 
    methods: { 
        onClick: function() { 
            this.$emit('appMainClicked', ''); 
        } 
    } 
    }; 
</script> 
 
 
 
Kindly let us know if the above sample is not meet your requirement. 
 
Regards, 
Narayanasamy P. 


Thin D
Replied On September 25, 2019 03:17 PM UTC

Hello there,

Based on the showcase https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/, I saw I can access toast component like this.$root.$children[0].$refs.toastRef.show({msg})


so with my structure project as screen shot below



Now I want to access Toast component from child component (Load component) of AppMain component




I try many case but does not success.

Please help.

Regards,
TD.







Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 26, 2019 11:51 AM UTC

 
Good day to you.

 
As we stated in the previous update, you can follow the same way for show the toast component from AppMain child of Load component as child parent component emitting concept. If you are using $refs to access another component for complex level of child and parent component, it will not be recommended to use $refs. So please follow below suggested way. 
Load.vue 
1. Create load component with button action to emit event to parent component 
<template> 
<div> 
    Load 
    <button v-on:click="onClick">Show Toast from Load component</button> 
</div> 
</template> 
 
<script> 
    export default { 
        name: "Load", 
        methods: { 
            onClick: function () { 
                this.$emit('loadClicked', ''); 
            } 
        } 
    }; 
</script> 
       
 
 
  
AppMain.vue 
2. Bind the child component event emit from child component declaration and attach event to onClick 
  
<template> 
    <div> 
        AppMain 
        <button v-on:click="onClick">Show Toast from AppMain component</button> 
        <Load @loadClicked="onClick" /> 
    </div> 
</template> 
 
<script> 
    import Load from "./Load"; 
 
    export default { 
        name: "AppMain", 
        components: { 
            Load 
        }, 
        methods: { 
            onClick: function () { 
                this.$emit('appMainClicked', ''); 
            } 
        } 
    }; 
</script> 
 
  
  
We have prepared a sample with your requirement using load component, 
 
Kindly check the above sample and get back to us, if still you are facing difficulties to access components. 
 
Regards, 
Narayanasamy P. 


Thin D
Replied On September 26, 2019 04:30 PM UTC

Hello there,

In my Vue app, I used <router-view> component that will display each of my views and Vue-Router only creates my component when end-user is accessing. On child component, end-user emits , then they go to another page the child component is not alive so it goes no where.

Please advise.

Thanks,
TD



Pandiyaraj Muniyandi [Syncfusion]
Replied On September 26, 2019 06:50 PM UTC

Hi Thin, 
 
Thanks for your update. 
 
Query: In my Vue app, I used <router-view> component that will display each of my views and Vue-Router only creates my component when end-user is accessing. On child component, end-user emits , then they go to another page the child component is not alive so it goes no where. 
 
As per your last update, we assume AppMain component holds router-view and Load, KeepAlive components are loaded based on routing action. Now you want to show the Toast from routing action based rendered Load component. 
 
As we state stated previous update of component interaction, we can show the toast message from Load component as follows 
 
  1. We configured router-view and router-link in AppMain component page and binded loadClicked event in router-view initialization to capture the child component emit event
  2. Then onClick event handler emit appMainClicked event to parent component (Layout) to call show() method
 
 
<template> 
  <div class="app-main"> 
    <br>AppMain 
    <br> 
    <br> 
    <router-link class="link" :to="{ path: '/load', query: { name: 'Foo' }}">Load</router-link> 
    <br> 
    <br> 
    <router-link class="link" :to="{ path: '/alive', query: { name: 'Foo' }}">KeepAlive</router-link> 
    <br> 
    <br> 
    <router-view @loadClicked="onClick"/> 
  </div> 
</template> 
 
<script> 
export default { 
  name: "AppMain", 
  methods: { 
    onClick: function() { 
      this.$emit("appMainClicked", ""); 
    } 
  } 
}; 
</script> 
 
  
  
  1. Load Component initialized using button and event binded for emit event to parent router-view
 
 
<template> 
  <div class="load"> 
    Load 
    <button v-on:click="onClick">Show Toast from Load component</button> 
  </div> 
</template> 
 
<script> 
export default { 
  name: "Load", 
  methods: { 
    onClick: function() { 
      this.$emit("loadClicked", ""); 
    } 
  } 
}; 
</script> 
 
 
  
We have prepared sample for your reference, check this below link 
 
If you still facing issue, kindly modify the shared sample with your exact requirement and share to us. Based on this we can provide the solution at earliest. 
 
Regards, 
Pandiyaraj M 


Thin D
Replied On September 29, 2019 05:35 AM UTC

Hello there,
Great, it works perfectly well.

Thanks,
TD.

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 30, 2019 04:46 AM UTC

Hi Thin, 
Thanks for your update.


We glad to hear that the reported issue has resolved at your end.
😊 
 
Regards, 
Narayanasamy P. 


Thin D
Replied On September 30, 2019 04:04 PM UTC

Hello there,
Because I need sticky the navbar, so I add position: sticky and z-index: 1006, I also set toast component with target: document.body but toast message is still behind the navbar.




please advise.

Thanks,
TD

Narayanasamy Panneer Selvam [Syncfusion]
Replied On October 2, 2019 01:52 AM UTC

Hi Thin, 
 
Good day to you. 
By default, Toast element have z-index value as 1000 and your sample navbar element z-index value is calculated as 1006. 
So as per browser behaviour, always z-index high-value holding element shown at top of the layer. To overcome this issue, we suggest you set higher z-index to toast element as follows in Layout.vue file with !important CSS to override inline-style 
<style> 
  .e-toast { 
     z-index: 1007 !important; 
  } 
</style> 
Please find the modified sample for reference your reference: https://codesandbox.io/s/vue-template-tywy4 
 
 
Regards, 
Narayanasamy P. 


Thin D
Replied On October 2, 2019 03:40 PM UTC

Thanks for your advice.


Narayanasamy Panneer Selvam [Syncfusion]
Replied On October 3, 2019 05:23 AM UTC

 
Thanks for your update. 
 
We glad to hear that the provided solution helped you to resolve your problem. Kindly let us know if you need further assistance on this.

 
Regards, 
Narayanasamy P. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon