[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$ }

}