⚠️ This lesson is retired and might contain outdated information.

Access Events from Vue.js Templates as RxJS Streams with domStreams

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 2 months ago

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.

Instructor: [00:00] Streams often start with events. I'm going to create a button with class of button and say click, and then say whenever we click, we'll fire off a clickstream, but the syntax, instead of this @, is going to be v-stream:click. This will automatically set up a stream for us, as long as we define a domStreams array that lists click as a stream we can access.

[00:27] Now I have this.clicks available to me, because this is listed here, and it's triggered here. I can create a random number, and just say random is coming from this.clicks and mapping to a math.random. Every time we click that, we're going to return a random value, and this random stream is going to stream values into here. We'll hit save, start clicking, and you'll see random numbers show up.

Bobby
Bobby
~ 6 years ago

Same as the last video. Had to import map from rxjs/operators. Looking at the examples for Vue-rx helped (https://github.com/vuejs/vue-rx/blob/master/example/counter-simple.html)

Markdown supported.
Become a member to join the discussionEnroll Today