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

Question

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

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

[确认框在用户按下cancel时打开-这表示RemoveButton在按下RemoveButton之前不会执行“删除”工作。单击confirm将显示对话框。

问题是我的对话框没有显示。我运行了Chrome开发工具，并确保RemoveButton正常运行，但setShowRemoveLayoutDialog(true)没有打开。即使当我在removeLayoutDialog上设置开发工具断点时，开发工具也永远无法达到它。

有人可以告诉我我做错了什么吗？

（（我们不必在这里谈论CSS，因为它已经由我的其他队友构建了）

（我无法执行public removeLayout(layoutName: string)，因为它会为皮棉触发.confirm(confirm message)错误。因此，我必须将其插入no-alert并为此创建一个div或元素。

谢谢！

这是我的Vue / html模板：

template

这是我的

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

：

<script>

Answer 1

我意识到在按钮内有对话框是问题所在。

@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;
    }
}

代替了<button ... <dialog></dialog> </button>解决了问题。