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

【问题标题】：Listing Elements of JSON Array with v-for使用 v-for 列出 JSON 数组的元素
【发布时间】：2019-04-08 20:38:07
【问题描述】：

我有一个 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

【问题讨论】：

标签： javascript arrays json vue.js v-for

【解决方案1】：

正确：

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

【讨论】：

你好，结果和下面提到的一样，页面空白
会输出什么 {{ peoples }} ？
@Tom 你能告诉我你是怎么弄peoples的吗？它看起来像确切的响应对象，peoples 应该是实际的peoples.data
@Tom 但这不是应该怎么做的......我并不是要在模板中替换 peoples 为 peoples.data 而是在您分配其值的地方
response.data.data = this.peoples

【解决方案2】：

将 .data 添加到 this.peoples

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

将 peoples:'' 更改为 peoples:[]

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

最后：

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

【讨论】：