last day (24 days later) » 

6:38 PM
3
A: How to create a simple modal for create & edit functions in vue.js?

VinceThis is a common problem. Of course, a lot of these things come down to personal preference or opinion, but here are a few things to consider: Usually when solving this problem, you display all of your existing models in some way (ie. a list), with an "edit" button. When I am doing this, I use ...

 
I'm displaying the questions in a table that has an edit button on each row, so each question has a different edit button. I'm using element-ui for display the table of questions, I'm not sure how to send a picture so I can show you how everything looks
 
Yeah, that's fine – that is essentially what I have in my answer. Each model (question) is displayed with an edit link.
 
What if I only have one model per page, like the create modal be the original and then an edit. I have other pages but I was thinking that each page had it's own model. My question is for the models array, if I just want one what needs to go there?
 
I don't think I follow... But if you are hoping to reduce complexity by creating a separate page for each model, I'm sorry to say, but that won't make the solution simpler. I think your current setup is fine. But it might be helpful if you can explain exactly what you are trying to do, and what your ideal solution would look like.
 
well in my project I have different things set up like the one I displayed, for example this one is about questions, but I also have surveys, classes, careers, semesters, users, it's like a school system for creating surveys for the students or teachers, so I'm thinking I need a separate form to create all those things on their respective pages, so do I need a different model for each one of those pages? I would create those all on different pages
 
6:38 PM
Ok, I see. Yes. I think having a separate page for each model is a good implementation. Each of those pages can follow the structure I have outlined above. On each page, you have your table of existing models (each with an "edit" button). The edit buttons trigger a modal (in "edit" mode) for editing the model. In addition to the table, you have a "create" button which triggers the modal (in "create" mode) for creating a new model. Does that sound right?
 
yes, that I exactly how I have it set up, I have changed my code to try and set it up like you have shown me, I have another question, in your code inside data() there is an array for models and like there is a list, if I only want one on this specific page do I need that or what should I put inside there?
 
If you only have one, rather than a list, you would want to change the models object inside data() to just model. Of course, this has implications for the way the rest of the code works as well. Essentially, you would need to update everything to singularize the code that was written with a list in mind.
 
just model: ' ' ? also the code I have currently to submit or save the question is different and when i edit and save it creates a new question, how can I fix this? This is my code
 
I'm not familiar with the Inertia, but in general, the URL you need to hit when updating is something like /questions/:id, where :id is the database ID of the question you are updating. Also, again in general, you hit this URL with a PUT or PATCH request, rather than a POST.
 
yea now the saving part is the only thing left, I can see the data when I try and edit
also what does this line do? mode === 'edit' ? update : save
 
6:49 PM
See point #4 in my answer.
 
oh right
 
Maybe I'm getting ahead of myself... are you familiar with the ternary operator?
 
not really
oh after reading the link
i get it
 
It's basically a shorthand for an if - else statement. In this case, it would be equivalent to doing if(mode === 'edit') { return update;} else { return save; }
Yeah
 
in this case does the update method need to be more similar to what i have for the submit? because right now it's not doing anything
i added a specific update route in my web.php : Route::post('/questions/update/{id}', 'QuestionController@update');
 
6:56 PM
Yes, update should be similar to save. Really the only difference is the route you POST to. So you could use the same method for both.
In that case, you would just choose the URL based on if the form is in edit or create mode.
 
i have this code that i've been using as a reference but i'm not super familiar with
 
Did that come from the ElementUI docs?
 
no, this is from a project I was working on, but only at the very end so the setup was done and I didn't learn how exactly this part worked
the guys who wrote this code, left for other jobs so now i'm just trying to figure it out with the code they left behind
 
Ah, I see. Well, it looks like it is first validating the form data using ElementUI's validation functionality. If validation passes, then the form is submitted to the server.
Where they do if (!this.form.id), they are checking if they are in "create" or "edit" mode
If there is no ID, you are in "create" mode
 
my actual submit code is based on this but simplified and without taking into account the create or edit functionality
oh ok
makes sense
 
7:02 PM
Makes sense, right? If you are creating then you don't have a database ID yet.
 
yea it does
this question has also helped me understand the forms and more how they work, so even though i did look and try to understand this code before it makes so much more sense now
 
Great!
I know how crazy it can be trying to jump into someone else's code and pick up where they left off.
 
yea I just started this job like 2 months ago, and they left like a month in and now i'm like one of their replacements having never worked in laravel, vue, web, or any one this really, i even have to do mobile apps too, i'm trying to learn everything i can but there is really no one i can ask, since there are only 2 people working here and the other guy isn't that much more experienced then me
 
Yikes! Well it seems like you're not doing so bad. I think you're in the right place too. Stack Overflow helped me so much when I first started out.
 
yea it really has for me too, good thing i like laravel and all the other stuff i've been doing so it's made it a bit easier for me, i think anyways haha
 
7:12 PM
Laravel + vue are my favorite tools. Have you heard of Laracasts.com (and Vuecasts.com)? In my opinion, it is the best resource for learning Laravel & Vue. Good luck!
 
Thanks! you've been a great help, for this question and some of my others!
 
No problem!
 

last day (24 days later) »