Proxying events with v-on="computed"

[timshannon]

I'm trying to replicate the proxying of events as described here: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components in the composition api. But am unable to get the events to proxy like they do without the plugin.

<label>
{{ label }}
    <input
        v-bind:value="value"
        v-on="inputListeners"
    >
</label>
export default createComponent({
    props: ["label", "value"],
    setup(props, context) {
        const inputListeners = computed(() => {
            // `Object.assign` merges objects together to form a new object
            return Object.assign({},
                // We add all the listeners from the parent
                context.root.$listeners,
                // Then we can add custom listeners or override the
                // behavior of some listeners.
                {
                    // This ensures that the component works with v-model
                    input: (event) => {
                        context.emit("input", event.target.value);
                    },
                },
            )
        });
        return {
            inputListeners,
        };
    },
});

Full fiddle here: https://jsfiddle.net/4wfzh0u6/

[liximomo]

The event proxy works file in the fiddle. What's your expectation?

[timshannon]

The blur event doesn't fire for me. Otherwise it would write "blur event works" in the console. Are you seeing that?

If it's proxying the blur event from the encapsulated component to the input element, then it should trigger that blur event.

[liximomo]

Object.assign({},
  // We add all the listeners from the parent
  context.root.$listeners, 
  // Then we can add custom listeners or override the
  // behavior of some listeners.
  {
    // This ensures that the component works with v-model
    input: function (event) {
      context.emit('input', event.target.value)
    },
  },
)

You should not use context.root.$listeners.

Unfortunately, we can't do this now because this is not available in setup().

[LinusBorg]

I think the problem is that there's not context.listeners. That's ok insofar as the RFC spec says that there is none, but that's only because, according to another RFC, this.$listeners and this.$attrs will be merged in Vue 3.

@liximomo So I think we should introduce a context.listeners property for this plugin - that would be in line with the spirit of the RFCs, as context should allow users to access these properties.

[liximomo]

@LinusBorg I agreed.