If I have two sibling components set up like this:
<div id="root2">
<some-component>First</some-component>
<some-component>Second</some-component>
</div>
... and these components are coded as follows:
Vue.component('some-component', {
template: '<button @click="doSomething" @somethingwasdone="this.reactToSomething" :disabled="this.isDisabled"><slot /></button>',
methods: {
doSomething() {
Event.$emit('somethingWasDone');
},
reactToSomething() {
this.isDisabled = true;
}
},
data() {
return {
isDisabled: false,
}
},
created() {
Event.$on('somethingWasDone', () => this.reactToSomething());
}
});
If my goal is to disable both buttons when one of them is clicked, I have implemented two event listeners intentionally - one using a 'v-on' directive and the other with the $on method in Vue instance. However, I am experiencing difficulty getting the former to function correctly without understanding the reason behind it.
I suspect that the issue may be related to the scope of the emitted event. Despite using the v-on directive, even the component emitting the event does not respond to it. Any assistance in resolving this matter would be highly valued!
Thank you,
Ryan
Update: Upon reviewing my code, I identified an error where the v-on directive was listening for 'componentclicked' instead of 'somethingwasdone'. After correcting this mistake, I confirmed that both approaches indeed work effectively.