Why doesn't RxJS Observable work in a Vue.js app div?
Question
In the example below, why is the RxJS Observable in the "whatever" div working, while the one in the app div for Vue.js does not work?
(I know there are modules available at NPM that bridge the Vue.js and RxJS worlds, but I'd still like to know why the simple case below fails while using the "plain old scripts").
You can run this at https://jsfiddle.net/3n1jw35x/ - the debug output is printed to the JS console so you'll have to have that open to observe.
<!DOCTYPE html>
<html>
<head>
<title>Why doesn't RxJS Observable work in Vue.js app div?</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.js"></script>
</head>
<body>
RxJS Observable works in a random div:
<BR>
<div id="whatever">
<input id="input_in_div_whatever">
</div>
<div id="app">
{{ message }}
<BR>
<input id="input_in_div_app">
</div>
<script>
const input_in_div_whatever = $('#input_in_div_whatever');
const content_whatever$ = Rx.Observable.fromEvent(input_in_div_whatever, 'keyup');
content_whatever$.subscribe(e => {
console.log('input_in_div_whatever works: ' + e.target.value.trim())
});
const input_in_div_app = $('#input_in_div_app');
const content_app$ = Rx.Observable.fromEvent(input_in_div_app, 'keyup');
content_app$.subscribe(e => {
console.log('input_in_div_app - you will never see this: ' + e.target.value.trim())
});
var app = new Vue({
el: '#app',
data: {
message: 'Why does RxJS Observable not work in the Vue.js app div?'
}
})
</script>
</body>
</html>
1 answers
solution1
4 ACCPTED 2017-09-27 01:14:53
Vue uses the element you give it as a template and renders it. You're attaching the Rx functions to the element before Vue (re)renders them. If you do the attachment in mounted , it works.
As a general rule, if you're going to have anything besides Vue do DOM manipulation, you should make a wrapper component .
const input_in_div_whatever = $('#input_in_div_whatever'); const content_whatever$ = Rx.Observable.fromEvent(input_in_div_whatever, 'keyup'); content_whatever$.subscribe(e => { console.log('input_in_div_whatever works: ' + e.target.value.trim()) }); var app = new Vue({ el: '#app', data: { message: 'Why does RxJS Observable not work in the Vue.js app div?' }, mounted() { const input_in_div_app = $('#input_in_div_app'); const content_app$ = Rx.Observable.fromEvent(input_in_div_app, 'keyup'); content_app$.subscribe(e => { console.log('input_in_div_app - you will never see this: ' + e.target.value.trim()) }); } })
<script src="https://unpkg.com/vue"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.js"></script> RxJS Observable works in a random div: <BR> <div id="whatever"> <input id="input_in_div_whatever"> </div> <div id="app"> {{ message }} <BR> <input id="input_in_div_app"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.