[Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS

You most likely already have data or properties in your template which are controlled by third-party components or updated using data binding. You can still use this data as stream by leveraging vue-rx's $watchAsObservable then chaining RxJS operators onto it as a new stream.

 

For example in our Vue page:

export default { name: 'app', data() { return { activeTab: 0 } }, ... }

We have a 'activeTab', which bind to template:

<b-tabs v-model="activeTab">
    <b-tab-item label="Luke"></b-tab-item>
    <b-tab-item label="Darth"></b-tab-item>
    <b-tab-item label="Leia"></b-tab-item>
  </b-tabs>

 

We can use '$watchAsObservable' to convert the value to Observable value:

 subscriptions() { const activeTab$ = this.$watchAsObservable('activeTab', {immediate: true}).pipe(pluck('newValue'))  return {activeTab$ } }