Can anyone explain why the RxJS Observable in the "whatever" div is functioning properly, while the one in the app div for Vue.js is not working?
(I am aware of modules that can bridge the gap between Vue.js and RxJS on NPM, but I am curious about why the simple scenario below fails when using just "plain old scripts").
To see this in action visit https://jsfiddle.net/3n1jw35x/ - you'll need to open the JS console to view the debug output.
<!DOCTYPE html>
<html>
<head>
<title>Why is the RxJS Observable not working in the 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>