Hey,
I just started working with Vue and I really like it. My first two components are build with browserfy like Jeffrey did it where the template, script and styles are all in one file. This is really handy.
Now I got another scenario where I'm not yet quite sure how to handle it with Vue. It's a big form with lots of inputs that I want to transform to a multi step form where you can navigate between the steps and only one step is shown to the user.
Here are my questions:
1.) Can I build a Vue compontent without the template in the component file? I use the Laravel view for the form for creating and updating. So there is a lot of dynamic data used. Maybe it would be ok to let Laravel handle that template and Vue just the JS part of switching what is shown. But that would mean I don't have a template part in the component file. Is that valid or is this all connected to the template.
2.) If you think you would handle the template with Vue too, why would that be the better choice? It would be more work to geht the data for the update form, guess I would need to get that via ajax instead of with Laravel like it is now.
Cheers and thx
In a components strategy, it is suggested that a component should carry all of its related pieces in one file ( template, css, and JS ) so I would not use laravel views at all! I would simply use Vue Router to go from one step to another
Thx @mehany! So would it still be a component? Or should a component be only something that could be used several times? My multistep form will be there just once. Still new to me these JS patterns.
@christophrumpel yes. I would put each step inside a component. Here is an example http://jsfiddle.net/eslny/xyu276sa/426/
Thanks @mehany for the detailed example, appreciate it!
@mehany the links is not available anymore http://jsfiddle.net/eslny/xyu276sa/426/
@leyduana if you are looking for help with the same situation here's a quick outline how I would tackle it:
create a shared data object like in: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/24
load a component for each step of the process as that step is reached. To move to the next step you could for example:
this.$emit('step-forward');
You could also allow stepping back this way with a small tweak.
Please or to participate in this conversation.