Custom Directives do not correctly obtain Vue Event Invoker

[Kassell]

Vue version

^3.5.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-35otlm?file=src%2Fdirective%2Fconfirm%2Findex.ts

Steps to reproduce

click secondary-confirmation button

What is expected?

Custom Directives can correctly obtain vue event invoker

What is actually happening?

Custom Directives do not correctly obtain vue event invoker

System Info

No response

Any additional comments?

If you use the v3.3.4 version, you can correctly respond to the secondary confirmation pop-up window. If you upgrade to v3.3.5 and later versions, you will not be able to obtain the vue event invoker using Custom Directives.

[Alfred-Skyblue]

To avoid modifying native HTMLElement attributes, we replace the original attributes with symbols, see #8681. You can access the VNode in the directive for usage.

mounted(el: ElType, binding: DirectiveBinding, vnode:VNode) {
    const invokers = vnode.props
    if (invokers.onClick) {
      if (!el.__handleClick__) el.__handleClick__ = el._vei.onClick.value;
      el._vei.onClick.value = () => {
        if (confirm('secondary-confirmation') == true) {
          el.__handleClick__();
        }
      };
    }
  },

[Kassell]

To avoid modifying native HTMLElement attributes, we replace the original attributes with symbols, see #8681. You can access the VNode in the directive for usage.

mounted(el: ElType, binding: DirectiveBinding, vnode:VNode) {
    const invokers = vnode.props
    if (invokers.onClick) {
      if (!el.__handleClick__) el.__handleClick__ = el._vei.onClick.value;
      el._vei.onClick.value = () => {
        if (confirm('secondary-confirmation') == true) {
          el.__handleClick__();
        }
      };
    }
  },

Changing invokers.onClick cannot intercept the triggering of onClick itself

mounted(el: ElType, binding: DirectiveBinding, vnode:VNode) {
    const invokers = vnode.props
    if (invokers.onClick) {
    const handleClick=invokers.onClick;
      invokers.onClick = () => {   // invalid
        if (confirm('secondary-confirmation') == true) {
          handleClick();
        }
      };
    }
  },

[Alfred-Skyblue]

Sorry, my response was incomplete. Personally, I don't recommend manually modifying vnode or 'vue' related properties within the 'el'. It might lead to unexpected outcomes. You could encapsulate your component to achieve the desired effect.

playground

[Kassell]

对不起，我的回复不完整。就个人而言，我不建议在“el”中手动修改 vnode 或 'vue' 相关属性。这可能会导致意想不到的结果。您可以封装组件以达到预期的效果。

操场

When this command is designed, it is hoped that it can block clicks and perform secondary confirmation. It will be applied to . Therefore, instead of manually modifying vnode or 'vue' related attributes in "el", how can I do this? Do not trigger 'onclick' of

[Alfred-Skyblue]

If you don't want to use the form of components, you can also encapsulate directives instead of manually modifying VNode or the el.

playground

[Kassell]

If you don't want to use the form of components, you can also encapsulate directives instead of manually modifying VNode or the el.

playground

I understand, I shouldn't use the default onClick method. Thank you for your answer. I suggest updating the vue documentation to explain this problem. I believe there are many people like me trying to modify the original attributes.

[Alfred-Skyblue]

Thank you for your understanding. We should be clear that properties prefixed with '_' are considered private and should not be used by users. These properties are intended for internal Vue usage and may change in future versions.

[Kassell]

Thank you for your understanding. We should be clear that properties prefixed with '_' are considered private and should not be used by users. These properties are intended for internal Vue usage and may change in future versions.

Sometimes we have no choice