Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

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