Vue实例中如何用Vue-resource获取的JSON初始化对象数组？

嗨，我来帮你搞定这个问题！你已经成功拿到了JSON数据，接下来只需要把数据赋值给Vue实例的data属性就可以实现初始化了，具体分两种情况来看：

情况1：初始化单个对象 #

如果你的需求是把返回的单个用户对象绑定到页面上，可以这样做：

首先在Vue的data里提前定义好接收数据的属性（比如user），然后在实例创建后的钩子（比如created）里发起请求，拿到数据后直接赋值：

<div id="app">
  <h3>用户信息</h3>
  <p>姓名：{{ user.name }}</p>
  <p>年龄：{{ user.age }}</p>
  <p>城市：{{ user.city }}</p>
</div>

<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    // 提前定义空对象，Vue会监听它的属性变化
    user: {}
  },
  created() {
    // 发起GET请求，替换成你的实际接口地址
    this.$http.get('/api/user').then(response => {
      // 拿到返回的JSON数据
      const userData = response.body;
      console.log(userData); // 你已经能在控制台看到这个数据

      // 直接赋值给data里的user，页面会自动更新
      this.user = userData;
    }, error => {
      // 处理请求失败的情况
      console.error('获取数据失败：', error);
    });
  }
});
</script>

情况2：初始化对象数组 #

如果你的需求是把这个用户对象放到一个数组里（比如后续可能有多个用户），那就在data里定义一个空数组，然后把拿到的数据push进去：

new Vue({
  el: '#app',
  data: {
    // 定义空数组
    userList: []
  },
  created() {
    this.$http.get('/api/user').then(response => {
      const userData = response.body;
      // 把单个对象添加到数组中
      this.userList.push(userData);
      // 如果接口返回的本身就是数组，直接赋值即可：this.userList = userData;
    }, error => {
      console.error('获取数据失败：', error);
    });
  }
});

对应的页面渲染可以用v-for循环：

<ul id="app">
  <li v-for="user in userList" :key="user.name">
    {{ user.name }} - {{ user.age }} - {{ user.city }}
  </li>
</ul>

关键要点提醒： #

• 一定要在data里提前定义好要绑定的属性（不管是对象还是数组），这样Vue才能对这些属性做响应式监听，保证数据变化时页面自动更新。
• 建议在created钩子中发起请求，这个阶段实例已经创建完成，能访问到this，适合做数据初始化操作。
• 如果你的接口返回的是数组格式，直接把response.body赋值给数组属性就行，不用push。

内容的提问来源于stack exchange，提问作者MachoBoy