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.
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.action
is to invokesignIn
orsignOut
method based on theisAuth
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 passaction
in the child.