So I’ve got an REST API and I’ve got a Vue app I’m using to interact with it. I want to manage certain endpoints with a modal for CREATE, EDIT, and DELETE. I ideally want to make it a single component with options that determine what it should/shouldn’t be doing.
This is proving to be a little difficult to figure out as it feels very complex. For the DELETE aspect, it’s easy since I can just have a prop with the delete link and a static modal that basically never changes. But for edit and update, it’s tricky because the input for 1 endpoint wont be the same as it is for another. I could use slots, but then since a majority of the modal will be defined inside the slot, it feels like that almost defeats the purpose of the component.
Currently the best solution I’ve thought up is to have 3 different components;
Then inside my view, define all of them with v-if’s and base it on if it’s been clicked or not.
I’m aware this is a REALLY bad solution, but it’s the best one I’ve got so far and is one of the reasons I’m posting here to try and get some help on improving it and making a more composite Modal component so that I can just define 1 component inside my view instead of 3 with a bunch of v-ifs.
Any help is appreciated!