VueJs + Firebase
I'm starting to use VueJS with Firebase (and VueFire), but I'm starting to figure out a little bit about how to structure data.
My case is pretty simple.
I have a supplier list and a product list.
A product can only be associated with one vendor, and a vendor can have multiple products.
And I have different views:
- List of all products for all suppliers
- Product list for one supplier.
- Detail of one product from a supplier.
For the first and second views, I have no problem with the following structure
products
- productKey1
- name : Product1
- productKey2
- name : Product2
supplier-products:
- supplierKey1
- productKey1
- name : Product1
- supplierKey2
- productKey2
- name : Product2
supplier:
- supplierKey1
- name : Supplier1
- supplierKey2
- name : Supplier2
I can easily show a list of all products from "/ products" and for each supplier from "vendor-products / vendorKey"
But what about presentation with product detail + supplier detail.
What's the best way to do this?
- Adding supplier information to each product?
- Add some kind of foreign key to products?
- Another way to do this?
Thank you for your help.
source to share
I have a similar problem in my application where I have a similar relationship between businesses and places. I found that the best solution is to have a Business Store, a Store for Places, and a store for connections between them.
In your case:
products: [
{ productKey: 1, name: 'Product1' },
{ productKey: 2, name: 'Product2' },
],
suppliers: [
{ supplierKey: 1, name: 'Supplier1' },
{ supplierKey: 2, name: 'Supplier2' },
],
supplierProducts: [
{ productKey: 1, supplierKey: 1 },
{ productKey: 2, supplierKey: 2 },
]
Now you can easily filter the list supplierProducts
in the currently selected supplierKey
or the currently selected productKey
and then use the opposite key to pull out the correct list for your view.
source to share