Vue：设置正确的条件后，为什么我的对话框没有显示？答案

【问题标题】：Vue: Why is my dialog not showing up when the right condition is set?Vue：设置正确的条件后，为什么我的对话框没有显示？
【发布时间】：2020-07-28 14:15:21
【问题描述】：

编辑：我回答了我自己的问题。我不知道如何将此标记为已解决，因为 SO 不允许我现在投票自己的答案。谢谢大家。

我正在尝试创建一个确认框（要求删除布局），用户必须在其中按 confirm 或 cancel - confirm 表示“是的，删除布局并关闭确认框”， cancel 的意思是“关上盒子”。

当用户按下 RemoveButton 时，确认框打开 - 这意味着 RemoveButton 在按下 confirm 之前不会执行“删除”工作。单击RemoveButton 应该会显示对话框。

问题是我的对话框没有出现。我运行了 Chrome 开发工具并确保 setShowRemoveLayoutDialog(true) 正常工作，但 removeLayoutDialog 没有打开。即使我在public removeLayout(layoutName: string) 上设置了开发工具断点，开发工具也永远无法到达它。

谁能告诉我我做错了什么？

（这里不用讨论 CSS，因为它已经由我的其他队友构建了）

（我不能这样做 .confirm(confirm message) 因为它会触发 lint 的 no-alert 错误。所以我必须将它插入到 template 并为此创建一个 div 或元素）。

谢谢！

这是我的 Vue/html 模板：

<RemoveButton @press="setShowRemoveLayoutDialog(true)">
    <removeLayoutDialog v-if="showRemoveLayoutDialog"
      :layout-name="props.node.name"
      @confirm="removeLayout"
      @cancel="setShowRemoveLayoutDialog(false)"/>
</RemoveButton>

这是我的<script>：

@Component({
    removeLayoutDialog,
    ...
})

export default class ThisClass {
    ...
    public showRemoveLayoutDialog = false;

    public removeLayout(layoutName: string) {
        this.doRemoveLayout(layoutName);
        this.showRemoveLayoutDialog = false;
    }

    public setShowRemoveLayoutDialog(isShown: boolean) {
        this.showRemoveLayoutDialog = isShown;
    }
}

【问题讨论】：

你为什么使用@press而不是@click？
我认为@click 只能通过鼠标完成。 @press 负责更广泛的操作：我认为可以通过任何方式按下按钮？
我还没有听说过 Vue 的 @press 事件，我现在无法用谷歌搜索它。但是，如果您确定它存在，请忽略我的评论。我当然不是什么都知道。

标签： vue.js event-handling confirmation

【解决方案1】：

我意识到在按钮内有对话框是问题所在。不是<button ... <dialog></dialog> </button>，而是<button><dialog> 解决了这个问题。

【讨论】：