[Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
2023-09-14 09:00:50 时间
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笔记:Vue基础
- 使用 Vuex + Vue.js 构建单页应用【新篇】
- 使用 Vuex + Vue.js 构建单页应用
- vue-router+vuex实现加载动态路由和菜单
- [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- webpack配合vue.js实现完整的单页面demo
- 从安装node js到构建一个vue并启动它
- 使用vue搭建应用五引入Mock.js
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- [Vue] Dynamic Vue.js Components with the component element
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- vue.js 3.2.20: 用rem实现移动端和pc的兼容
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- vue v-for打印九九乘法表
- Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
- VSCode 中 Vue模板