Emitted values are nested too deep in domStreams about vue-rx HOT 4 CLOSED

.map( (payload, event) )
It’s not about vue-rx, The emmiting value from Observable has to be a non-splittable singular.
The payload contains raw event Object and data from ‘v-stream’ directive

from vue-rx.

That's a good point.

After giving this some more thought, what still seems to bother me is that the value I'm trying to pass along is getting trapped inside two layers. At worst, I feel like it should be one layer.

If I simply listen to the ChildComponent's "change" event using standard even listeners (@change="onChildChange"), then value passed from the child component comes straight through as the first parameter in the handler, no nesting.

export default {
  name: "parent",
  methods: {
    onChildChange(value) {
      // do something with value
    },
  },
  components: {
    ChildComponent,
  },
};

But as soon as you use vue-rx streams, two layers of nesting are added:

{
  event: {
    // …
    msg: "…", // the value passed from the ChildComponent
    // …
  },
  data: { /* … */ }
}

I understand that the first layer of nesting is there so you can add data parameters. But the second layer feels inconsistent with the fact that the standard event listener doesn't work this way.

This feels like what it should be doing:

export default {
  name: "parent",
  domStreams: ["changeEvents"],
  subscriptions() {
    this.changeEvents
-     .map(payload => payload.event.msg)
+     .map(payload => payload.event) // where `event` is the value passed from `ChildComponent`
      .subscribe(value => {
        // do something with value
      });
  },
  components: {
    ChildComponent,
  },
};

Or, if I don't pass any data parameters at all, I would actually prefer the following:

export default {
  name: "parent",
  domStreams: ["changeEvents"],
  subscriptions() {
    this.changeEvents
-     .map(payload => payload.event.msg)
      .subscribe(value => { // just pass along what the `ChildComponent` emitted
        // do something with value
      });
  },
  components: {
    ChildComponent,
  },
};

Is there a good reason both layers need to be there?

Cheers 🙏

from vue-rx.

The outputs of this.changeEvents should be consistence in all circumstances, don't you think?
And instead of .map you may use .pluck('event','msg')

Above them all you can directly convert the method onChildChange(value) to observable by $createObservableMethod('onChildChange'). This api is for some child components that use callbacks.

from vue-rx.

Thanks, @regou. Your tip on $createObservableMethod() helped me find something thats seems to work as expected. It was a variant on the counter-function example:

export default {
  name: "parent",
  observableMethods: ["childChange"],
  subscriptions() {
    this.childChange$.subscribe(value => {
      // do something with value
    });
  },
  components: {
    ChildComponent,
  },
};

This solves my problem. Thank you. 🙏

(It would still be great to see an example showing the full context of a child component publishing an observable stream and the parent component subscribing to it. I still don't know The Right Way to do that.)

from vue-rx.