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

}

巴特西

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

最新文章

热门文章