javascript - 无法从创建方法内的 Prop 访问对象

Question

我从 API 资源中获取了一个对象并将其放入属性中，然后子组件无法访问创建的方法中的 props 对象以将其值作为数组和字符串分配给我的数据属性中

当我尝试控制台子组件中的 Prop 时，我发现其中有我的 items 对象

“这是我的父组件”

<template>
  <v-container grid-list-xl fill-height>
    <v-layout row wrap>
      <v-flex xs6 offset-xs3>
        <message-box :items="source" v-if="source.length > 0"></message-box>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
<script>
import MessageBox from './MessageBox'
export default {
  components:{MessageBox},
  data() {
    return {
      room_id: 1,
      source: {},
    };
  },
  created(){
    var app = this;
    axios.get(`/api/room/${app.room_id}/message`)
    .then(res => app.source = res.data.data);
  }
};
</script>

</script>

“这是我的子组件”

<template>
    <div>
        <beautiful-chat
          :participants="participants"
          :titleImageUrl="titleImageUrl"
          :onMessageWasSent="onMessageWasSent"
          :messageList="messageList.messageList"
          :newMessagesCount="newMessagesCount"
          :isOpen="isChatOpen"
          :close="closeChat"
          :icons="icons"
          :open="openChat"
          :showEmoji="true"
          :showFile="true"
          :showTypingIndicator="showTypingIndicator"
          :colors="colors"
          :alwaysScrollToBottom="alwaysScrollToBottom"
          :messageStyling="messageStyling"
          @onType="handleOnType"
          @edit="editMessage"
        />
    </div>
</template>

<script>
import CloseIcon from "vue-beautiful-chat/src/assets/close-icon.png";
import OpenIcon from "vue-beautiful-chat/src/assets/logo-no-bg.svg";
import FileIcon from "vue-beautiful-chat/src/assets/file.svg";
import CloseIconSvg from "vue-beautiful-chat/src/assets/close.svg";
export default {
  props: ['items'],
  data() {
    return {
      room_id: 1,
      participants:[],
      messageList: [],
      limit: 7,
      busy: false,
      auth_uid: User.id(),
      titleImageUrl:
        "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
      newMessagesCount: 0,
      isChatOpen: false,
      alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true,
      showTypingIndicator: "",
      icons: {
        open: {
          img: OpenIcon,
          name: "default"
        },
        close: {
          img: CloseIcon,
          name: "default"
        },
        file: {
          img: FileIcon,
          name: "default"
        },
        closeSvg: {
          img: CloseIconSvg,
          name: "default"
        }
      },
      colors: {
        header: {
          bg: "#4e8cff",
          text: "#ffffff"
        },
        launcher: {
          bg: "#4e8cff"
        },
        messageList: {
          bg: "#ffffff"
        },
        sentMessage: {
          bg: "#4e8cff",
          text: "#ffffff"
        },
        receivedMessage: {
          bg: "#eaeaea",
          text: "#222222"
        },
        userInput: {
          bg: "#f4f7f9",
          text: "#565867"
        }
      }
    };
  },
  methods: {
    sendMessage(text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen
          ? this.newMessagesCount
          : this.newMessagesCount + 1;
        this.onMessageWasSent({
          author: "support",
          type: "text",
          data: { text }
        });
        axios
          .post(`/api/room/${this.room_id}/message`, { body: text })
          .then(res => console.log("message sent"));
      }
    },
    onMessageWasSent(message) {
      // called when the user sends a message
      this.messageList = [...this.messageList, message];
    },
    openChat() {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true;
      this.newMessagesCount = 0;
    },
    closeChat() {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false;
    },
    handleScrollToTop() {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType() {
      console.log("Emit typing event");
    },
    editMessage(message) {
      const m = this.messageList.find(m => m.id === message.id);
      m.isEdited = true;
      m.data.text = message.data.text;
    },
  },
  created(){
    // console.log(this.$props.items)
    Array.prototype.forEach.call(this.$props.items, child => {
        this.participants = child.participants;
        // console.log(this.participants)
        this.messageList = child.body;
        // console.log(this.messageList)
    });
  },
  computed:{
      itemarr(){
          return this.$props.items
      }
  }
};
</script>

“控制台错误为TypeError:Array.prototype.forEach 在 null 或未定义时调用”

“我的 items 对象的输出是 {__ob__: Observer}”

Answer 1

您可以使用v-if来解决您的问题。您需要等待ajax响应来渲染子组件

<template>
  <v-container grid-list-xl fill-height>
    <v-layout row wrap>
      <v-flex xs6 offset-xs3>
        <message-box v-if="sourceLength > 0" :items="source"></message-box>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
<script>
import MessageBox from './MessageBox'
export default {
  components:{MessageBox},
  data() {
    return {
      room_id: 1,
      source: {},
    };
  },
  created(){
    var app = this;
    axios.get(`/api/room/${app.room_id}/message`)
    .then(res => app.source = res.data.data);
  },
  get sourceLength() {
    return Object.keys(this.source).length;
  }
};
</script>

</script>