Get all the data from an Array - vue.js

Question

I have an API which was developed using Laravel and i am trying to pass the data into vue js to display it.
The data is like this
electData: Object
category: Array[3]
0: Object
cat_desc: modified
category_id: 95
cost: 56
kwh_used: 99
1: Object
cat_desc: modified
category_id: 95
cost: 56
kwh_used: 99
2: Object
cat_desc: modified
category_id: 95
cost: 56
kwh_used: 99
And i tried to render it by using v-for
<tr>
<td class="clickOption" #click="first">{{ (electCats.category[0].cat_desc) }}</td>
<td>{{ electCats.category[0].kwh_used }}</td>
<td>£{{ electCats.category[0].cost }}</td>
</tr>
The above code display the first object in the array.
My question is that how do i get the 2nd, 3rd etc in the array because when i do this
<tr>
<td class="clickOption" #click="second">{{ (electCats.category[1].cat_desc) }}</td>
<td>{{ electCats.category[1].kwh_used }}</td>
<td>£{{ electCats.category[1].cost }}</td>
</tr>
I get error [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'cat_desc')"
How can i avoid this error?

Answer 1

[Vue warn]: Error in render: "TypeError: Cannot read properties of
undefined (reading 'cat_desc')"
As per the error, It seems you are trying to access an object from category array which is not available.
Working Demo :
const app = new Vue({
el: '#app',
data() {
return {
electData: {
category: [{
cat_desc: 'Description 1',
category_id: 1,
cost: 51,
kwh_used: 97
}, {
cat_desc: 'Description 2',
category_id: 2,
cost: 52,
kwh_used: 98
}, {
cat_desc: 'Description 3',
category_id: 3,
cost: 53,
kwh_used: 99
}]
},
filteredData: []
}
},
methods: {
getCategoryDetails(categoryId) {
this.filteredData = this.electData.category.filter((obj) => obj.category_id === categoryId)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-for="category in electData.category" :key="category.category_id" style="border: 1px solid black" #click="getCategoryDetails(category.category_id)">
{{ category.category_id }}
</button>
<table>
<tr v-for="category in filteredData" :key="category.category_id">
<td>{{ (category.cat_desc) }}</td>
<td>{{ category.kwh_used }}</td>
<td>£{{ category.cost }}</td>
</tr>
</table>
</div>

Answer 2

I would v-for on the <tr> element, something like:
<tr v-for "(category, index) in electCats.category" :key="index" >
<td class="clickOption" #click="categoryClick(index)">{{ (category.cat_desc) }}</td>
<td>{{ category.kwh_used }}</td>
<td>£{{ category.cost }}</td>
</tr>
Where categoryClick() is the function induced by clicking a row. You probably want to pass a parameter into the #click-induced function, perhaps the index, so that the function knows which element you have clicked on.