Данные синхронизации Vue на v-for

внутри моего шаблона у меня есть этот элемент:

<template>
  <div>
    <span v-for="item in items">{{item.name}}</span>
  </div>
</template>

в моем сценарии у меня есть:

import axios from 'axios';
export default {
    data: () => ({ items: null }),
    mounted: function () {
        var vm = this;
        axios.get('/items')
         .then(function (response) {
          vm.items = response.data;
        });
   }
}

Мой вопрос заключается в том, как сделать, чтобы элементы <span> отображались, а для v-for выполнялись, как только ответ возвращался со списком items?


vue.js axios vuejs2 v-for
person Kal    schedule 17.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно обернуть spans, созданный v-for, в один корень div:

<template>
  <div>
    <span v-for="item in items">{{item.name}}</span>
  </div>
</template>

А также, кажется, есть проблема с vm.items = response;, который должен быть vm.items = response.data;, см. схему ответа axios подробнее.

person Psidom    schedule 17.12.2017
comment
Я отредактировал свой пост, и с предложением я все еще не могу заставить его работать - person Kal; 18.12.2017
comment
Может быть, console.log(response.data) в axios.get.then(...), чтобы увидеть, возвращает ли API то, что вы ожидаете. - person Psidom; 18.12.2017
comment
Проблема заключалась в том, что мой ответ был объектом JSON, и, создав response.data список массивов из items объектов, он заработал: D - person Kal; 18.12.2017