Get all the data from an Array

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.