如何等待 API 回调完全渲染组件？答案

【问题标题】：How can i wait for API callback to completely render a component?如何等待 API 回调完全渲染组件？
【发布时间】：2019-12-29 20:14:36
【问题描述】：

我从 API 获得请求，然后将数据分配给 created 方法中名为 source 的属性。现在在渲染函数中遇到一些问题，在组件完全创建之前将source 中的一些数据分配给它们的属性participants

source 属性在组件完全渲染后有其属性但participants 中没有数据

这是API Resource

return [
          'id' => $this->id,
          'user_id' => $this->user_id,
          'participants' => [
              'id' => $this->user_id,
              'name' => $this->user->name,
              'imageUrl' => 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
          ],
          'body' =>[
              'type' => 'text', 
              'author' => $this->user == auth()->user() ? "me" : $this->user->name,
              'data' => ['text' => $this->body],
          ],
          'created_at' => $this->created_at->diffForHumans(),
      ];

这是我的元素标签<beautiful-chat>

<beautiful-chat 
  :participants="participants" 
  :messageList="messageList"
  v-if=" this.source.length > 0 "
/>

这是渲染函数

<script>
export default {
  data() {
    return {
      source: {},
      room_id: ChatRoom.id(),
      participants:[],
      messageList: [],
    };
  },
  created(){
      axios.get(`/api/room/${this.room_id}/message`)
        .then(res => this.source = res.data.data);

    Array.prototype.forEach.call(this.source, child => {
        const parti = Object.keys(child.participants).map(i => child.participants[i])

        this.participants.push({'id': parti[0], 'name' : parti[1], 'imageUrl' : parti[2]});

        const message = Object.keys(child.body).map(i => child.body[i])

        this.messageList.push({'type': message[0], 'author' : message[1], 'data' :message[2] });

    });
  }
};
</script>

我在哪里可以从源中获取数据以将它们放入我的属性中，而不是 created 方法

【问题讨论】：

res.data.data 是 array 还是 object ？
它是一个对象，我会更新API资源的问题

标签： arrays laravel api object vue.js

【解决方案1】：

首先制作source=null

export default {
  data() {
    return {
      source: null,
      room_id: ChatRoom.id(),
      participants:[],
      messageList: [],
    };
  },
  created(){
    axios.get(`/api/room/${this.room_id}/message`)
      .then(res => {
        let source = res.data.data
        // Array.prototype.forEach.call(source, child => {
        //   const parti = Object.keys(child.participants).map(i => child.participants[i])
        //   this.participants.push({'id': parti[0], 'name' : parti[1], 'imageUrl' : parti[2]});
        //   const message = Object.keys(child.body).map(i => child.body[i])
        //   this.messageList.push({'type': message[0], 'author' : message[1], 'data' :message[2] });
        // });

        // a better way:
        this.participants = [source.participants]
        this.messageList = [source.body]

        this.source = source
      });
  }
};

在模板中：

<beautiful-chat 
  :participants="participants" 
  :messageList="messageList"
  v-if="source"
/>

您也可以使用computed property。

【讨论】：