[Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
2023-09-14 08:59:17 时间
domStreams
enable you to pass additional data along the stream that can be provided by the template (such as data coming from a v-for
rendering of an Array). You can then pluck
off the data from the stream and use it further down the stream.
<template> <section class="section"> <button class="button" :disabled="disabled$" v-stream:click="{subject: click$, data: 1}">{{buttonText$}}</button> <h2> {{name$}} </h2> <img v-stream:error="imageError$" :src="image$" alt=""> </section> </template> <script> import { from, of, merge, throwError } from 'rxjs'; import { exhaustMap, switchMap, pluck, map, mapTo, catchError, shareReplay, share, startWith } from 'rxjs/operators'; export default { name: 'app', domStreams: ['click$', 'imageError$'], subscriptions() { const createLoader = url => from(this.$http.get(url)).pipe(pluck('data')); const luke$ = this.click$.pipe( pluck('data'), map(id => `https://starwars.egghead.training/people/${id}`), exhaustMap(createLoader), catchError(() => of({name: 'Failed.. :('})), share() ); const name$ = luke$.pipe(pluck('name')); const loadImage$ = luke$.pipe( pluck('image'), map(src => `https://starwars.egghead.training/${src}`) ); const failImage$ = this.imageError$.pipe( mapTo(`http://via.placeholder.com/400x400`) ); const image$ = merge( loadImage$, failImage$ ) const disabled$ = merge( this.click$.pipe(mapTo(true)), luke$.pipe(mapTo(false)), ).pipe(startWith(false)); const buttonText$ = disabled$.pipe(map(b => (b ? 'Loading...' : 'Load'))); return { name$, image$, failImage$, disabled$, buttonText$ }; } }; </script>
相关文章
- vue笔记:vue组件的生命周期
- webpack+vue-cli+ElementUI+vue-resource 前端开发
- JS框架_(Vue.js)带有星期日期的数字时钟
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- vue.js3: 用crypto-js做sha加密(vue@3.2.37 / crypto-js@4.1.1)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js 3.2.20:拖动创建div及移动、缩放、删除等操作
- vue.js开发SPA常见问题及解决方法
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- vue.js3: 图片的反色/灰度(黑白)/褐色并保存(vue@3.2.37)
- vue项目JS播放音频音效和背景音乐
- vue脚手架搭建报错:vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOU
- vue-ant design示例大全——icon与分隔符本地css/js资源
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
- 136:vue+openlayers 绘制正三角形,正方形,正五边形...
- 013:vue+openlayers加载引用maptiler地图,多种展现形式
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 【JS高级】js之正则相关函数以及正则对象_02
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- 为什么要学Vue,Vue.js是什么,开始学Vue,Vue的基础指令,自定义指令