2π
β
I see many problems here, that could all be part of the reason why itβs not working. Given that you have defined your emitter to be new Vue()
, and added that to the Vue prototype correctly and that the component that emits the event does it by this.emitter.emit('editSnippet')
. You have to:
Replace
this.emitter.on("editSnippet", snippet => function(snippet){ this.mode = "edit"; });
with
this.emitter.on("editSnippet", () => { this.mode = "edit";});
Reasons:
- You have to use an arrow function, otherwise
this
will not reference your component. - Your callback should be a function that "does something", not one that returns a function (that wonβt be called)
Further improvements (optional):
- Use computed props instead of methods as described in the other answer
- Cleanup the listener in
beforeUnmount
(orbeforeDestroy
) withthis.emitter.off...
. Actually not really optional, it is at least really bad code style to not do that
π€v-moe
2π
You should use computed properties instead of methods in this case :
<template>
<div class="main">
<button @click=" inCreationMode() " v-if="inCreationMode">
Make a new snippet
</button>
<button v-if="inEditMode">Push edits</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mode: "creation",
};
},
created() {
this.emitter.on("editSnippet", snippet => function(snippet){
this.mode = "edit";
});
},
computed:{
inCreationMode() {
return this.mode === "creation";
},
inEditMode(){
return this.mode ==="edit";
}
}
};
</script>
Note : remove the ()
from the v-if
value
Source:stackexchange.com