0

Hello I'm trying to add a custom Vue component to my template using the DOM, I already setted the properties, but I can't set the associated attribute of events in the custom component. Here is my buttonVue.vue component (child component) :

export default {
emits:['action','isAuth'],
data:function(){
    return {msg:this.textDisplay()}
},
 methods:{
    textDisplay(){
        return this.$emit('isAuth')?'Sign in with Microsoft':'Sign out from Microsoft'
    }
 }
}
</script>

parent component:

 insertBtnComponent){
    var ComponentClass = Vue.extend(buttonVue)
    var instance = new ComponentClass({
    propsData:{class:"buttonMs" ,style:" position: static ;",
    'action':this.isUserAuthenticated()?this.signOut():this.signInUser(),
    'isAuth':this.isUserAuthenticated()
   }
 })
  let selector = document.querySelector(".classNAMEofDiv");
  instance.$mount()
  selector.appendChild(instance.$el)

I would appreciate any hints on my problem, thanks in advance.

7
  • 1
    Instead of using emit events from child. You can pass isAuth value from parent to child as a prop and then in child you can show the message. If this can work, I can help you in resolving the issue. Commented Jun 16, 2022 at 13:59
  • @Rohìt Jíndal.I think I got you ,thanks.But, what about 'action'?Would be greate if you got some ideas.
    – Nurbek Ss
    Commented Jun 16, 2022 at 15:37
  • As per my understanding, action is to invoke signIn or signOut method based on the isAuth value. So now my question is that those links will be in child component or parent ? If those links are in parent then no need to pass action in the child. Commented Jun 16, 2022 at 17:01
  • They are in parent component,how ever the child component is similar to button behavior,so that's why I wanted to pass these links to child component.To determinate the event on @click. Are there some parameters in Vue.extend to determinate the emits?
    – Nurbek Ss
    Commented Jun 16, 2022 at 17:25
  • 1
    Thank you dude,appreciate your intention to help me,but I resolved it myself.Best regards.
    – Nurbek Ss
    Commented Jun 17, 2022 at 7:20

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.