從一個陣列中獲取所有資料

我有一個使用 Laravel 開發的 API，我正在嘗試將資料傳遞到 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  @click="first">{{ (electCats.category[0].cat_desc) }}</td>
                                    <td>{{ electCats.category[0].kwh_used }}</td>
                                    <td>￡{{ electCats.category[0].cost }}</td> 
                                 </tr>

上面的代碼顯示陣列中的第一個物件。

我的問題是我如何在陣列中獲得第二個、第三個等，因為當我這樣做時

 <tr>  
                                    <td  @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')"

我怎樣才能避免這個錯誤？

uj5u.com熱心網友回復：

[Vue 警告]：渲染錯誤：“TypeError：無法讀取未定義的屬性（讀取 'cat_desc'）”

根據錯誤，您似乎正在嘗試訪問不可用object的category陣列。

作業演示：

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>

uj5u.com熱心網友回復：

我會在<tr>元素上使用 v-for ，例如：

<tr v-for "(category, index) in electCats.category" :key="index" > 
    <td  @click="categoryClick(index)">{{ (category.cat_desc) }}</td>
    <td>{{ category.kwh_used }}</td>
    <td>￡{{ category.cost }}</td> 
</tr>

categoryClick()單擊一行所引發的功能在哪里。您可能希望將引數傳遞給@click-induced 函式，也許是索引，以便該函式知道您單擊了哪個元素。

標籤：Vue.js Vue组件

上一篇：VueJs：表單資料事件

下一篇：使用BASH腳本PING多個引數