从数组中获取所有数据

Question

我有一个 API 是使用 Laravel 开发的，我正在尝试将数据传递到 vue js 中以显示它。

数据是这样的

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

我尝试使用 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>

以上代码显示数组中的第一个对象。

我的问题是如何获得数组中的第二个、第三个等，因为当我这样做时

 <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>

我收到错误 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'cat_desc')"

我怎样才能避免这个错误？

Answer 1

我会在 <tr> 元素上 v-for，例如：

<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>

其中categoryClick()是点击一行引起的函数。您可能想将参数传递给 @click-induced 函数，也许是索引，以便函数知道您单击了哪个元素。

Answer 2

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'cat_desc')"

根据错误，您似乎正在尝试从 category 数组访问一个不可用的 object。

工作演示：

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>

从数组中获取所有数据

Get all the data from an Array

vue.js

vue-component