Vue 在 v-for 上同步数据

Question

在我的模板中我有这个元素：

<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> 元素，并在响应返回 items 列表后执行 v-for？

Answer 1

您需要将 v-for 创建的 spans 包装在单个根目录中 div:

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

而且 vm.items = response; 似乎也有问题，应该是 vm.items = response.data;，请参阅 axios response schema 了解更多详情。

Vue 在 v-for 上同步数据

Vue Sync Data on v-for

vue.js

axios

vuejs2

v-for