Vue modal form @submit.prevent not working

Posted 6 days ago by rothrauffconsulting

I'm working on an internal Nova tool and I need to protect a delete button with a modal. My problem is I can't get Vue to prevent the submit and instead call my function, or the cancel button action to fire. I've gotten @submit.prevent to work on other forms so I'm not sure what the problem is with this one. Here is my modal:

<div class="vue-portal-target">
   <div id="modal-delete" class="modal select-none fixed pin z-50 overflow-x-hidden overflow-y-auto hidden">
      <div class="relative mx-auto flex justify-center z-20 py-view">
         <div>
            <form @submit.prevent="deleteOption" class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 460px;">
               <div class="p-8">
                  <h2 class="mb-6 text-90 font-normal text-xl">Delete Option</h2>
                  <p class="text-80 leading-normal">Are you sure you want to delete this option?</p>
               </div>
               <div class="bg-30 px-6 py-3 flex">
                  <div class="ml-auto">
                     <button @click="cancelDelete" type="button" class="btn text-80 font-normal h-9 px-3 mr-3 btn-link">Cancel</button>
                     <button type="submit" class="btn btn-default btn-danger">Delete</button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

Please sign in or create an account to participate in this conversation.