Vue.js- Render A price comparison on a table - html

Question

I have a use case, i'm struggling to put together.I want to display prices of goods from different shops like in the picture below.
My problem is i get the following table;
The output on my table is incorrect. Price for Zimgold is only available in Spar. But here its displayed under all other shops. The same goes for Raha.Its Price is supposed to be under OK.I want other shops to have a dash or empty rows if they don't have that product.
Here is my vue.js code:
<modal ref="comparisonTable" no-close-on-backdrop no-close-on-esc hide-cancel width="600px" title="GENERATE BILL" :hide-ok="true" hide-footer centered>
<Spinner v-show="productsLoader" :message="productsLoaderMessage" size="medium"></Spinner>
<table class="table table-striped " v-show="productsTable" width="100%">
<!--Table head-->
<thead>
<tr class="table-info">
<th>Product Brands</th>
<th v-for="company in selectedCompaniesDetails" :key="company.id">
{{company.name}}
</th>
<th>Pick</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr v-for="product in products" :key="product.id">
<th scope="row">
{{product.name}}
</th>
<td v-for ="totalCompanies in totalSelectedCompanies" :key="totalCompanies">
<span>
{{product.price}}
</span>
</td>
<td>
<input type="checkbox" style="margin:10px;" v-model="selectedProducts" :value="product"/>
</td>
</tr>
<tr>
<th scope="row">
</th>
<td v-for ="totalCompanies in totalSelectedCompanies" :key="totalCompanies">
</td>
<th>
<button #click="generateFinalBill($event)">
GENERATE BILL
</button>
</th>
</tr>
</tbody>
</table>
</modal>

Answer 1

In your example you have two nested for loops, the outer one loops through products and the inner one loops through totalSelectedCompanies.
The problem is that your product.price variable only changes with each iteration of the outer loop. In order to display a different price for each iteration you would need to have the value be affected by the inner loop.
The way you do this would depend on how the price is stored or calculated but the one way to do this is to store the prices for each seller in the product object and loop through that:
<tr v-for="product in products" :key="product.id">
<th scope="row">
{{product.name}}
</th>
<td v-for ="seller in product.sellers">
<span>
{{seller.price}}
</span>
</td>
<td>
<input type="checkbox" style="margin:10px;" v-model="selectedProducts" :value="product"/>
</td>
</tr>
An issue with this is that you would have to have every seller in product.sellers regardless of if they actually sold it. Instead I would make a method that returns the price of a product from the given company, then you could do something like:
<tr v-for="product in products" :key="product.id">
<th scope="row">
{{product.name}}
</th>
<td v-for ="company in selectedCompanies">
<span>
{{calculateCompanyPrice(product, company)}}
</span>
</td>
<td>
<input type="checkbox" style="margin:10px;" v-model="selectedProducts" :value="product"/>
</td>
</tr>
calculateCompanyPrice() would then contain all the logic for returning the price you need from a given product and company, including displaying a dash if the company does not sell the given product.
Edit: It's worth noting that you can technically put any valid javascript between your {{ }}s, so I'm sure there are many other ways of outputting the proper price within the inner loop.