使用 v-for 列出 JSON 数组的元素

Question

我有一个 API 包含我的 JSON 格式的数据。它成功加载，我可以显示整个数组，但我在显示某些字段时遇到问题。

数组存储在一个字段中：

           peoples: '',
           errors: ''

这就是我目前尝试显示信息的方式

  <div id="table">
   <li v-for="people in peoples">
       {{people}}
   </li>

Whis 显示为：

{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 }

我知道放置 {{people[0}.username} 会显示该值，但这仅适用于单个记录，我该怎么做才能列出所有用户名（无论数组大小等）

例）

username123
username124
username125

Answer 1

正确：

<div id="table">
<li v-for="people in peoples">
 {{people.username}}
 {{people.firstnames}}
</li>
</div>

Answer 2

已将 .data 添加到 this.peoples

.then(response => {
 console.log(JSON.stringify(response.data))
 this.peoples = response.data.data
 })

将人物：''更改为人物：[]

export default {
data(){
    return{
        peoples: [],
        errors: ''
    }
},

最后：

      <li v-for="people in peoples">
      {{people.username}}
      {{people.firstnames}}
      </li>

使用 v-for 列出 JSON 数组的元素

Listing Elements of JSON Array with v-for

javascript

arrays

json

vue.js

v-for