In order to showcase multiple HTML tables of tools, where each table represents a category and each row in the table represents a tool.
data() {
return {
cats: '',
tools: [],
};
},
methods: {
getToolCats() {
var rez = getToolCats();
rez.then(data => this.receiveCats(data) )
},
receiveCats(_cats){
this.cats = _cats;
_cats.forEach(cat => {
getToolsByCat(cat.href).then(data => this.tools[cat.href] = data);
});
console.log(this.tools);
},
},
mounted() {
this.getToolCats();
},
The 'cats' (categories) array is filled with data retrieved from an API call. Subsequently, for each category, an API call fetches the list of tools belonging to that category, which are then stored in the 'tools' array using 'this.tools[cat.href] = data'.
Below is the code snippet for displaying the tables:
<div v-for="cat in cats" :key="cat.href" class="tbox col-xs-12 col-sm-6">
....
<table class="table table-hover">
<tr v-for="tool in tools[cat.href]" :key="tool.href">
<td>...</td>
</tr>
</table>
....
</div>
When trying to use a single variable to store the tool list, everything works fine. However, since the number of categories is unknown, creating a variable for each category becomes unfeasible.
Potential issue lies here:
- Using an array in v-for without a key being defined at the mounted state:
v-for="tool in tools[cat.href]
Any assistance on this matter would be greatly appreciated!