[Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams

Posted 2020-12-04 Answer1215

The domStreams component property enables you to access Events from your Vue.js templates as Streams insides your subscriptions function. You can then map the Events to other values and stream them back into your Vue.js templates.

 

<template>
  <section class="section">
    <button class="button" v-stream:click="click$">Click</button>
    <h1 class="title">{{random$}}</h1>
  </section>
</template>

<script>
import { Observable } from "rxjs"

export default {
  domStreams: ["click$"],
  subscriptions() {
    const random$ = this.click$.map(() =>
      Math.random()
    )

    return {
      random$
    }
  }
}
</script>