domStreams enable you to pass additional data along the stream that can be provided by the template (such as data coming from a v-forrendering 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的更多相关文章

  1. [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  ...

  2. Vue 数组 字典 template v-for 的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. [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 ...

  4. Vue学习笔记 template methods,filters,ChromeDriver,安装sass

    ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...

  5. Kendo-Grid for Vue API and Template

    写此博客的原因:在做项目时前端用的vue,后端用的jfinal.在前端veu中调用了kendo grid插件,但是在官方文档中对kendo grid for vue 的api和template都不太详 ...

  6. [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 包导出的是运行时构 ...

  7. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  8. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  9. Vue中用props给data赋初始值遇到的问题解决

    Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论   这篇文章主要介绍了Vue中用props给dat ...

随机推荐

  1. [转]oracle 同义词 synonym

    本文转自:http://blog.csdn.net/generalfu/article/details/7906561 同义词定义 当一个用户想访问另外一个用户的表时, 需要在表前加用户名,总加表名不 ...

  2. 2017-12-04HTML布局_div布局

    HTML布局_div布局 <!doctpye> <html> <head> <meta charset = 'utf-8'> <title> ...

  3. 面试中的一些小问题之html5和html4的区别?

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  4. Linux 学习(三)

    Linux进程 1.进程 进程:可执行应用程序执行后产生的对应的进程,重量级:进程是由一个线程或多个线程构成: 线程:是计算机中的最小单位,轻量级(依赖和物理性是独立存在的).损耗较低 假设进程1是由 ...

  5. 个人觉得比较好用的chrome插件

    印象笔记·悦读 "悦读"可使博文.文章和网页变得简明而又易于阅读.将其保存至印象笔记以便随时随地阅读. Anything to QRcode 通过右键菜单或地址栏按钮将当前页面地址 ...

  6. Flask框架 之request对象

    一.request对象属性 属性 说明 类型 data 记录请求的数据,并转换为字符串 * form 记录请求中的表单数据 MultiDict args 记录请求中的查询参数 MultiDict co ...

  7. Java基础(六)--枚举Enum

    枚举: 刚开始项目中没怎么用过,只知道能够实现作为项目中类似定义Constant的功能,然后知道枚举实现的单例模式几乎是最优雅的,所以, 想要深入完整的了解一下 1.基本特性: Enum.values ...

  8. Linux的net.ipv4.tcp_timestamps参数

    Q1 今天发生了一个奇怪的现象,在家里始终打开公司的网站打开不了,我就齐了怪了,然后我就各种测试,从ping到dig域名,然后再curl,都是没有问题的,但是就是打不开,最好没有办法只能抓包了,从抓包 ...

  9. SwiftyUserDefaults对NSUserDefaults的封装扩展

    SwiftyUserDefaults 是对NSUserDefaults的一些封装和扩展,这个库这个只有一个类,操作起来十分简单方便: 这里只有两个步骤来使用SwiftyUserDefaults: st ...

  10. <MyBatis>入门四 传入的参数处理

    1.单个参数 传入单个参数时,mapper文件中 #{}里可以写任意值 /** * 传入单个参数 */ Employee getEmpById(Integer id); <!--单个参数 #{} ...