Pass Template Data Through domStreams in Vue.js and RxJS
domStreams enable you to pass additional data along the stream that can be provided by the template (such as data coming from a v-for rendering of an Array). You can then pluck off the data from the stream and use it further down the stream.
Instructor: [00:01] Our domstreams also allow us to pass some data along inside of our configured stream here. If we pass an object along instead of just click, I can say that the subject is the click that's created from the domstream, and the data is just going to be the number one, or this is the id for Luke.
[00:20] If I come down here into my click, I can say pluck the data off, and then map that ID to the string of this, using that ID. I'll hit save here and have the exact same result. What this allows me to do is, if I create three buttons where each of these uses different data -- four is Darth Vader and five is Leia -- I'll just save. Then I can click this one to get Luke, this one to get Darth, and this one to get Leia.
[01:00] Each of these passes a data along. The data comes through the click stream here. You can pluck off the data, and then use that data to map whatever data comes through -- I just named it ID -- pass it along, and use it however you need it.