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

Already subscribed? Sign In

Autoplay

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

    John LindquistJohn Lindquist

    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.

    vueVue.js
    ^2.0.0
    rxjsRxJS
    ^5.0.0
    javascriptJavaScript
    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss