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