Vue: почему мое диалоговое окно не отображается, когда задано правильное условие? - PullRequest
Новая
       31

Vue: почему мое диалоговое окно не отображается, когда задано правильное условие?

0 голосов
/ 15 апреля 2020

РЕДАКТИРОВАТЬ: я ответил на свой вопрос. Я не знаю, как пометить это как решенное, так как SO не позволяет мне голосовать за мой собственный ответ прямо сейчас. Спасибо всем.

Я пытаюсь создать окно подтверждения (с просьбой удалить макет), в котором пользователь должен нажать confirm или cancel - confirm означает «да, удалить макет и закрыть окно подтверждения », cancel означает« просто закрыть окно ».

Окно подтверждения открывается, когда пользователь нажимает RemoveButton - это означает, что RemoveButton не выполняет работу по« удалению »до confirm нажата. При нажатии RemoveButton должен появиться диалоговое окно.

Проблема в том, что мое диалоговое окно не отображается. Я запустил Chrome dev tool и убедился, что setShowRemoveLayoutDialog(true) работает, но removeLayoutDialog не открывается. Даже когда я установил точку останова инструмента dev на public removeLayout(layoutName: string), инструмент dev никогда не достигнет ее.

Может кто-нибудь сказать мне, что я делаю не так?

(нам не нужно говорить о CSS здесь, поскольку он уже построен другими моими товарищами по команде)

(я не могу сделать .confirm(confirm message), потому что он вызовет no-alert ошибка для lint. Поэтому я должен вставить его в 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;
    }
}

1 Ответ

0 голосов
/ 15 апреля 2020

Я понял, что проблема в диалоге внутри кнопки. Вместо <button ... <dialog></dialog> </button> решение <button><dialog> решило проблему.

...