Vue中内联onClick方法调用问题：如何正确传递事件？

问题根源 #

你当前的写法失效有两个核心原因：

1. Fancybox动态生成的HTML内联onClick属于全局浏览器上下文，无法直接访问Vue setup中定义的addToCart方法（该方法仅存在于Vue组件的作用域内）。
2. 直接将event对象拼进HTML字符串会被强制转为字符串（如[object MouseEvent]），导致语法错误，无法正确传递事件。

推荐解决方案：利用Fancybox回调绑定事件 #

通过Fancybox的afterShow回调，在弹窗渲染完成后手动为按钮绑定事件监听，这样就能直接访问Vue作用域内的方法，同时正确传递事件对象。

修改后的displayApproval方法代码：

const displayApproval = (event) => {
  event.preventDefault();

  Fancybox.show([{
    src: `
            <div>
                <h3>Please look over the custom text to make sure its correct. <br>
                    All sales are final on custom items.</h3>
                <button class="fancybox-btn-back" style="width: 200px; height: 50px; background-color: rgb(247, 185, 162);">Go Back To Confirm</button>
                <button class="fancybox-btn-continue" style="width: 200px; height: 50px; background-color: rgb(211, 254, 211);">Continue With Order</button>
            </div>`,
    type: "html",
    // 弹窗渲染完成后执行的回调
    afterShow: (instance) => {
      // 绑定返回按钮事件
      const backBtn = instance.$refs.container.querySelector('.fancybox-btn-back');
      backBtn.addEventListener('click', () => Fancybox.close());

      // 绑定继续按钮事件，直接调用setup中的addToCart
      const continueBtn = instance.$refs.container.querySelector('.fancybox-btn-continue');
      continueBtn.addEventListener('click', (e) => {
        addToCart(e); // 正确传递点击事件
        Fancybox.close(); // 可选：执行后关闭弹窗
      });
    }
  }]);
}

备选方案：全局挂载方法（不推荐） #

如果一定要使用内联onClick，可以将addToCart挂载到全局window对象，但会造成全局污染，需注意组件卸载时清理：

1. 在setup中挂载方法：

const addToCart = (event) => { 
  // do something 
}
// 挂载到全局
window.addToCart = addToCart;

// 组件卸载时移除全局方法，避免内存泄漏
onUnmounted(() => {
  delete window.addToCart;
});

2. 弹窗内的按钮写法：

<button onClick="addToCart(event); Fancybox.close(); return false;" style="width: 200px; height: 50px; background-color: rgb(211, 254, 211);">Continue With Order</button>

内容的提问来源于stack exchange，提问作者FabricioG