Subscribe on changes!

Dynamic v-on and static v-on should be merged (first is overriden)

avatar
Sep 24th 2022

Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNp1UstuwjAQ/JWtLwEJYvWKAupDlfoF7aHuISQbCPJLtpMeovx71wklhIqbd3ZmvK+OPVubtg2yDct84WobwGNo7E7oWlnjAnTgsIIeKmcUJERNhBa6MNoHUP4A25hfJO8opYFP42T5kCwnSh6C80TqhAYw+kU2bgOLJWx3EAlGYirNYZFE3jkf5f3kIGsfUOPksr/nMTEj5WLDObwahX5sIQfrjP0zb3NZl3nAtxZ1oA+SQRlVVaOLUBt9LgoWGCnLsYTZt7PPrmQfM+/7+htmsoKROjhmfFwLLYSCgMpKIlIEkB0fd103LKHvM07RgNbaNtTYel/rcivYsADBCFCmREkICSh+imVTNLYXga/ZML6H3KyywcVoSlwmLRh9mvFLXWzFxrtZq9ymJ280XdbQsjgnSLIZhxAxuqcYC3YMwfoN574q4j2efGrcgdMrdY0OtcIUvVrvnfnx6MhYsNWVByewRbd2qEt0SO3c97yh/vONtjT4nvW/u9cXqg==

Steps to reproduce

Add a static v-on followed by a dynamic v-on:

<script setup>
defineProps(['validateEvent'])
</script>

<template>
  <input
    @blur="onBlur"
    @[validateEvent]="onValidate"
  >
</template>

What is expected?

onBlur is called even if validateEvent === 'blur'

What is actually happening?

onBlur is not called

System Info

No response

Any additional comments?

No response

avatar
Sep 24th 2022

The compiler should probably generate

_withDirectives(_createElementVNode("input", _mergeProps(attrs, {
  "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((msg).value = $event)),
  onBlur: onBlur,
}, {
  [_toHandlerKey(validateEvent)]: onValidateEvent
}, _toHandlers(listeners, true)), null, 16 /* FULL_PROPS */), [
  [_vModelDynamic, msg.value]
])

instead of:

_withDirectives(_createElementVNode("input", _mergeProps(attrs, {
  "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((msg).value = $event)),
  onBlur: onBlur,
  [_toHandlerKey(validateEvent)]: onValidateEvent
}, _toHandlers(listeners, true)), null, 16 /* FULL_PROPS */), [
  [_vModelDynamic, msg.value]
])