Vue- variables inside event bus are not reactive
0
I created global event bus
Vue.prototype.$eventHub = new Vue()
In 'component 2' clicking on the button, emitted the event then navigating to 'component 1'
this.$eventHub.$emit('deleted')
In another 'component 1' i am trying to use it
data: function () {
return {
testVariable : true
}
},
beforeMount () {
var self = this
this.$eventHub.$on('deleted', function () {
console.log("executed")
self.testVariable = false
})
}
In the template section i used {{testVariable}}, it's always displaying true. Why it is not reactive? what did i miss?
javascript vue.js vuejs2 event-bus
asked Nov 14 '18 at 7:18
SamSam
18412
|
show 3 more comments
0
I created global event bus
Vue.prototype.$eventHub = new Vue()
In 'component 2' clicking on the button, emitted the event then navigating to 'component 1'
this.$eventHub.$emit('deleted')
In another 'component 1' i am trying to use it
data: function () {
return {
testVariable : true
}
},
beforeMount () {
var self = this
this.$eventHub.$on('deleted', function () {
console.log("executed")
self.testVariable = false
})
}
In the template section i used {{testVariable}}, it's always displaying true. Why it is not reactive? what did i miss?
javascript vue.js vuejs2 event-bus
asked Nov 14 '18 at 7:18
SamSam
18412
isconsole.log("executed")executed ?
– Jacob Goh
Nov 14 '18 at 7:33
yes it is printed.
– Sam
Nov 14 '18 at 7:35
hmm weird. it worked for me codesandbox.io/s/z6wv7y7rz4
– Jacob Goh
Nov 14 '18 at 7:37
1
I think you misunderstood how the event works. The event listener has to exist when the event is emitted. Which means component 1 and component 2 has to exist at the same time.
– Jacob Goh
Nov 14 '18 at 8:00
1
Since you want to navigate from 1 route to another, you can either 1) store the shared state in Vuex, 2) pass the boolean value through a url param for e.g.url?testVariable=true
– Jacob Goh
Nov 14 '18 at 8:02
|
show 3 more comments
0
0
0
I created global event bus
Vue.prototype.$eventHub = new Vue()
In 'component 2' clicking on the button, emitted the event then navigating to 'component 1'
this.$eventHub.$emit('deleted')
In another 'component 1' i am trying to use it
data: function () {
return {
testVariable : true
}
},
beforeMount () {
var self = this
this.$eventHub.$on('deleted', function () {
console.log("executed")
self.testVariable = false
})
}
In the template section i used {{testVariable}}, it's always displaying true. Why it is not reactive? what did i miss?
javascript vue.js vuejs2 event-bus
asked Nov 14 '18 at 7:18
SamSam
18412
I created global event bus
Vue.prototype.$eventHub = new Vue()
In 'component 2' clicking on the button, emitted the event then navigating to 'component 1'
this.$eventHub.$emit('deleted')
In another 'component 1' i am trying to use it
data: function () {
return {
testVariable : true
}
},
beforeMount () {
var self = this
this.$eventHub.$on('deleted', function () {
console.log("executed")
self.testVariable = false
})
}
In the template section i used {{testVariable}}, it's always displaying true. Why it is not reactive? what did i miss?
javascript vue.js vuejs2 event-bus
javascript vue.js vuejs2 event-bus
asked Nov 14 '18 at 7:18
SamSam
18412
asked Nov 14 '18 at 7:18
SamSam
18412
asked Nov 14 '18 at 7:18
SamSam
18412
asked Nov 14 '18 at 7:18
SamSam
18412
asked Nov 14 '18 at 7:18
SamSam
18412
18412
isconsole.log("executed")executed ?
– Jacob Goh
Nov 14 '18 at 7:33
yes it is printed.
– Sam
Nov 14 '18 at 7:35
hmm weird. it worked for me codesandbox.io/s/z6wv7y7rz4
– Jacob Goh
Nov 14 '18 at 7:37
1
I think you misunderstood how the event works. The event listener has to exist when the event is emitted. Which means component 1 and component 2 has to exist at the same time.
– Jacob Goh
Nov 14 '18 at 8:00
1
Since you want to navigate from 1 route to another, you can either 1) store the shared state in Vuex, 2) pass the boolean value through a url param for e.g.url?testVariable=true
– Jacob Goh
Nov 14 '18 at 8:02
|
show 3 more comments
isconsole.log("executed")executed ?
– Jacob Goh
Nov 14 '18 at 7:33
yes it is printed.
– Sam
Nov 14 '18 at 7:35
hmm weird. it worked for me codesandbox.io/s/z6wv7y7rz4
– Jacob Goh
Nov 14 '18 at 7:37
1
I think you misunderstood how the event works. The event listener has to exist when the event is emitted. Which means component 1 and component 2 has to exist at the same time.
– Jacob Goh
Nov 14 '18 at 8:00
1
Since you want to navigate from 1 route to another, you can either 1) store the shared state in Vuex, 2) pass the boolean value through a url param for e.g.url?testVariable=true
– Jacob Goh
Nov 14 '18 at 8:02
is
console.log("executed") executed ?– Jacob Goh
Nov 14 '18 at 7:33
is
console.log("executed") executed ?– Jacob Goh
Nov 14 '18 at 7:33
yes it is printed.
– Sam
Nov 14 '18 at 7:35
yes it is printed.
– Sam
Nov 14 '18 at 7:35
hmm weird. it worked for me codesandbox.io/s/z6wv7y7rz4
– Jacob Goh
Nov 14 '18 at 7:37
hmm weird. it worked for me codesandbox.io/s/z6wv7y7rz4
– Jacob Goh
Nov 14 '18 at 7:37
1
1
I think you misunderstood how the event works. The event listener has to exist when the event is emitted. Which means component 1 and component 2 has to exist at the same time.
– Jacob Goh
Nov 14 '18 at 8:00
I think you misunderstood how the event works. The event listener has to exist when the event is emitted. Which means component 1 and component 2 has to exist at the same time.
– Jacob Goh
Nov 14 '18 at 8:00
1
1
Since you want to navigate from 1 route to another, you can either 1) store the shared state in Vuex, 2) pass the boolean value through a url param for e.g.
url?testVariable=true– Jacob Goh
Nov 14 '18 at 8:02
Since you want to navigate from 1 route to another, you can either 1) store the shared state in Vuex, 2) pass the boolean value through a url param for e.g.
url?testVariable=true– Jacob Goh
Nov 14 '18 at 8:02
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294930%2fvue-variables-inside-event-bus-are-not-reactive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294930%2fvue-variables-inside-event-bus-are-not-reactive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
is
console.log("executed")executed ?– Jacob Goh
Nov 14 '18 at 7:33
yes it is printed.
– Sam
Nov 14 '18 at 7:35
hmm weird. it worked for me codesandbox.io/s/z6wv7y7rz4
– Jacob Goh
Nov 14 '18 at 7:37
1
I think you misunderstood how the event works. The event listener has to exist when the event is emitted. Which means component 1 and component 2 has to exist at the same time.
– Jacob Goh
Nov 14 '18 at 8:00
1
Since you want to navigate from 1 route to another, you can either 1) store the shared state in Vuex, 2) pass the boolean value through a url param for e.g.
url?testVariable=true– Jacob Goh
Nov 14 '18 at 8:02