Html Question posted in
Some basic documentation can be found here.

Prevent HTML <dialog> from closing with Vue

I’m trying to use Vue to programmatically prevent an HTML dialog element’s close event from closing the dialog. Here’s the code I’m working with:

import {ref} from 'vue';
const dialogTemplateRef = ref();

//I want this toggle to prevent it from closing...
let preventClosing = true;

const closingHandler = function(event){
  //...but it has no effect
  if(preventClosing){
    event.preventDefault();
  } 
}
<button @click="dialogTemplateRef.showModal()">open</button>
<dialog ref="dialogTemplateRef" @close="closingHandler">
  <button @click="dialogTemplateRef.close()">close</button>
</dialog>

Using event.preventDefault() fails to stop the dialog from closing. Using Vue’s event modifiers like .stop or .prevent also appears to have no effect. Is this possible?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I discovered that this isn't possible. It's not related to Vue, but rather the HTML dialog element's close event. It turns out that the close event "is not cancelable and does not bubble."


  2. 0

    @launchoverit is right,You need to do it differently

    import {ref} from 'vue';
const dialogTemplateRef = ref();

//I want this toggle to prevent it from closing...
let preventClosing = true;

const closingHandler = function(){
  if(!preventClosing){
   dialogTemplateRef.value.close()
  } 
}

    <button @click="dialogTemplateRef.showModal()">open</button>
    <dialog ref="dialogTemplateRef" >
      <button @click="closingHandler">close</button>
    </dialog>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search