Cannot correctly override onClick in v-bind

[cangSDARM]

Vue version

3.5.13

Link to minimal reproduction

https://cn.vuejs.org/

Steps to reproduce

<script setup>
const { locale, t } = useI18n();

const items = [
    {
        title: 'change language',
        props: {
           onClick: () => (locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'),
        },
        disabled: true,
   },
]

const onClick = (e, item) => {
  if (item.disabled) return;

  item.onClick?.(e);

  if (item.children) {
    toggleExpand(item);
  }
};
</script>

<template>
<div
        v-for="(item, i) in items"
        :key="i"
        v-bind="item.props"
        v-on:click="(e) => onClick(e, item)"
      >
</div>
</template>

What is expected?

The item's onclick should be blocked from being triggered because it's disabled.

What is actually happening?

item.onclick is still triggered.

System Info

Any additional comments?

No response

[linzhe141]

https://vuejs.org/api/render-function.html#mergeprops
This is expected behavior

[KaloudasDev]

Hello! This behavior is expected due to how Vue's v-bind merges event handlers. When you use both v-bind="item.props" and v-on:click, Vue merges the event handlers rather than overriding them.

The Issue:

• v-bind="item.props" includes an onClick handler
• v-on:click adds another click handler
• Vue merges both handlers, so both execute

Solution 1: Conditional v-bind

<script setup>
const { locale, t } = useI18n();

const items = [
    {
        title: 'change language',
        props: {
           onClick: () => (locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'),
        },
        disabled: true,
   },
]

const onClick = (e, item) => {
  if (item.disabled) return;
  item.props?.onClick?.(e);
};
</script>

<template>
<div
        v-for="(item, i) in items"
        :key="i"
        v-bind="item.disabled ? {} : item.props"
        @click="(e) => onClick(e, item)"
      >
</div>
</template>

Solution 2: Manual Event Handling

<script setup>
const { locale, t } = useI18n();

const items = [
    {
        title: 'change language',
        action: () => (locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'),
        disabled: true,
   },
]

const onClick = (e, item) => {
  if (item.disabled) return;
  item.action?.();
};
</script>

<template>
<div
        v-for="(item, i) in items"
        :key="i"
        v-bind="item.props"
        @click="(e) => onClick(e, item)"
      >
</div>
</template>

Solution 3: Separate Props from Events

<script setup>
const { locale, t } = useI18n();

const items = [
    {
        title: 'change language',
        onItemClick: () => (locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'),
        otherProps: {
          class: 'some-class',
          style: { color: 'red' }
        },
        disabled: true,
   },
]

const onClick = (e, item) => {
  if (item.disabled) return;
  item.onItemClick?.(e);
};
</script>

<template>
<div
        v-for="(item, i) in items"
        :key="i"
        v-bind="item.otherProps"
        @click="(e) => onClick(e, item)"
      >
</div>
</template>

Solution 4: Event Handler Wrapper

<script setup>
const { locale, t } = useI18n();

const items = [
    {
        title: 'change language',
        props: {
           onClick: () => (locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'),
        },
        disabled: true,
   },
]

const handleClick = (e, item) => {
  if (!item.disabled) {
    item.props?.onClick?.(e);
  }
};
</script>

<template>
<div
        v-for="(item, i) in items"
        :key="i"
        v-bind="{ ...item.props, onClick: undefined }" 
        @click="(e) => handleClick(e, item)"
      >
</div>
</template>

Recommended Approach:
Use Solution 1 (conditional v-bind) as it's the most explicit and clear about when the original props should be applied. This prevents the event handler merging behavior entirely by only binding the props when the item is not disabled.

The key insight is that Vue's v-bind with event handlers and explicit v-on directives result in merged event execution, not override behavior.