Vue JS使用v-for從對象數組中獲取JSON鍵值時出錯

我想使用Vue.js將JSON有效內容中的對象列表解析爲表。Vue JS使用v-for從對象數組中獲取JSON鍵值時出錯

我想借此從第一對象的按鍵陣列中創建表的標題，下面工作的代碼，並提供了正確的價值觀，但問題是我不斷收到此錯誤信息

錯誤信息

[Vue warn]: Error in render function: "TypeError: objectArray is null" 

(found in <Root>)

HTML元素

<thead> 
    <tr> 
     <th v-for="(value, key) in objectArray[0]"> 
      {{ key }} 
     </th> 
    </tr> 
</thead>

的JSON有效載荷

[ 
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" }, 
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" }, 
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" } 
]

的Vue的代碼來填充對象

var link = 'api/array'; 

new Vue ({ 
    el: '#app', 
    data: { 
     objectArray: null 
    }, 
    methods:{ 
     getObjectArray: function(){ 
      this.$http.get(link).then(function(response){ 
       this.objectArray = response.data; 
      }, function(error){ 
       console.log(error.statusText); 
      }); 
     } 
    }, 
    mounted: function() { 
     this.getObjectArray(); 
    } 
});

來源

2017-07-05 excedion

警告意味着你'objectArray'屬性是當它試圖在'0'訪問索引'null'。你是異步加載這個JSON數據嗎？ – thanksd

不能異步加載它。我可以在同一點上加載整個列表而不會出現任何問題。只有當我在該數組中指定要使用的元素時纔會發生此問題。如果我使用{{objectArray [0]}}在該索引處打印出對象，則不會出現任何錯誤 – excedion

您可以顯示設置'objectArray'的位置嗎？ – thanksd

該錯誤是因爲objectArray爲空的第一時間，並且不是陣列。試試這個代碼，以防止錯誤，直到您的要求被加載：

<thead v-if='objectArray'> 
    <tr> 
     <th v-for="(value, key) in objectArray[0]"> 
      {{ key }} 
     </th> 
    </tr> 
</thead>

來源

2017-07-05 20:29:26

啊謝謝。如果我最初需要檢查空值，我是否在Vue設置上做了錯誤的操作？ – excedion

@ user2120640這取決於情況，可能取決於個人偏好或團隊標準。如果你不想通過'v-if'來檢查，你最初也可以將'objectArray'設置爲'[{}]'。或者你可以創建一個計算屬性'fooObject'，如果它存在，則返回'objectArray [0]'的值，否則返回空對象。然後你可以在'v-for'中引用'fooObject'。 – thanksd

Vue JS使用v-for從對象數組中獲取JSON鍵值時出錯

回答

相關問題