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键值时出错

回答

相关问题