That didn't seem to help. The form is still submitted without calling my handler and the cancel button onclick still doesn't fire. I was able to print out a vue variable on the modal fine though so this isn't a case of the modal being outside the vue object.
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>
I'm working on creating a custom nova tool. I ran php artisan nova:tool and had some problems with the webpack that I was able to resolve by manually installing them in npm; npm install webpack --save-dev, npm install laravel-mix --save-dev.
I was then able to use npm run dev, prod, and watch without issue.
Now when I navigate to my tool url it just gives me an empty nova page instead of the placeholder blackhole page. I know it's calling the page because if I mess with the line "component: require('./components/Tool')," in the tool.js file I get errors. However, nothing in the file is rendering, and no changes seem to matter.
Any help would be appreciated.