Список элементов массива JSON с помощью v-for - PullRequest
Новая
       13

Список элементов массива JSON с помощью v-for

0 голосов
/ 05 ноября 2018

У меня есть 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

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Добавлены .data к этому .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>
0 голосов
/ 05 ноября 2018

Верно: 

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