Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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

    John LindquistJohn Lindquist
    5.5.12 - 6.4.0

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.