[Vuejs]-Why doesn't RxJS Observable work in a Vue.js app div?

by

3👍

✅

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>
👤Roy J

Leave a comment