[Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
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="data: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-rx] Pass Template Data Through domStreams in Vue.js and RxJS的更多相关文章
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
Components with slots can expose their data by passing it into the slot and exposing the data using ...
- Vue 数组 字典 template v-for 的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
转载自:https://segmentfault.com/a/1190000006435886 解决办法:添加package.config.js配置文件中,添加本文章的红色部分代码 import vu ...
- Vue学习笔记 template methods,filters,ChromeDriver,安装sass
ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...
- Kendo-Grid for Vue API and Template
写此博客的原因:在做项目时前端用的vue,后端用的jfinal.在前端veu中调用了kendo grid插件,但是在官方文档中对kendo grid for vue 的api和template都不太详 ...
- [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available
原文链接https://blog.csdn.net/xiaomajia029/article/details/88320233 问题描述: 原因分析:在项目配置的时候,默认 npm 包导出的是运行时构 ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
随机推荐
- [转]oracle 同义词 synonym
本文转自:http://blog.csdn.net/generalfu/article/details/7906561 同义词定义 当一个用户想访问另外一个用户的表时, 需要在表前加用户名,总加表名不 ...
- 2017-12-04HTML布局_div布局
HTML布局_div布局 <!doctpye> <html> <head> <meta charset = 'utf-8'> <title> ...
- 面试中的一些小问题之html5和html4的区别?
HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...
- Linux 学习(三)
Linux进程 1.进程 进程:可执行应用程序执行后产生的对应的进程,重量级:进程是由一个线程或多个线程构成: 线程:是计算机中的最小单位,轻量级(依赖和物理性是独立存在的).损耗较低 假设进程1是由 ...
- 个人觉得比较好用的chrome插件
印象笔记·悦读 "悦读"可使博文.文章和网页变得简明而又易于阅读.将其保存至印象笔记以便随时随地阅读. Anything to QRcode 通过右键菜单或地址栏按钮将当前页面地址 ...
- Flask框架 之request对象
一.request对象属性 属性 说明 类型 data 记录请求的数据,并转换为字符串 * form 记录请求中的表单数据 MultiDict args 记录请求中的查询参数 MultiDict co ...
- Java基础(六)--枚举Enum
枚举: 刚开始项目中没怎么用过,只知道能够实现作为项目中类似定义Constant的功能,然后知道枚举实现的单例模式几乎是最优雅的,所以, 想要深入完整的了解一下 1.基本特性: Enum.values ...
- Linux的net.ipv4.tcp_timestamps参数
Q1 今天发生了一个奇怪的现象,在家里始终打开公司的网站打开不了,我就齐了怪了,然后我就各种测试,从ping到dig域名,然后再curl,都是没有问题的,但是就是打不开,最好没有办法只能抓包了,从抓包 ...
- SwiftyUserDefaults对NSUserDefaults的封装扩展
SwiftyUserDefaults 是对NSUserDefaults的一些封装和扩展,这个库这个只有一个类,操作起来十分简单方便: 这里只有两个步骤来使用SwiftyUserDefaults: st ...
- <MyBatis>入门四 传入的参数处理
1.单个参数 传入单个参数时,mapper文件中 #{}里可以写任意值 /** * 传入单个参数 */ Employee getEmpById(Integer id); <!--单个参数 #{} ...