Question

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

该数组存储在一个字段中：

           peoples: '',
           errors: ''

这是我当前试图显示信息的方式

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

将其显示为：

{ "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

已向.peoples中添加.data

.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

2 个答案: