Tips for a newbie. How to structure and bind componentes in this case:

Hello all,
I’m learning vue and want to implement it on a project but not sure how to do this:
I have a product object composed by main table and many extra-tables so my idea is to create a vue component to wrap all the different tables. But:

  • before a producto can be creates I want the user to select what kind of product is and then:
  • with the type open a component with a form and the main fields.
  • And when save this and get (or load exisiting) the ID then load the extra components with the correspondents form and fields . Some of this extra-table fields values depends on some of the options in the main table.

But as I said, I’m learning and don’t know the best way to do it.
No expecting you to give me all code done, but tips how to or what to look for on google will be welcome!

Something like:
WrapComponent:

Thanks!

First of all, I don’t have a clear vision of what you are trying to achieve, so what i can do is just giving some advice blindly since I don’t know how much you know about Vue.
Some core/important mechanics that I can see you could use is:

  • $emit
  • props
  • VueRouter

From the structure of your flow chart, If i am not mistaken, you should only need 4 Vue component file

  1. App.vue(Your application container)
  2. Select Group (Your main container)
  3. Main Product Field (component )
  4. Related fields table (component)
    Then all you have to do is jumping around within these 4 components.
1 Like