Javascript Can'；t从props inside created方法访问对象

我从API资源中获取了一个对象，并将其放入属性中，然后子组件无法访问props的objectinsidecreated方法中的object，以便在我的数据属性中将其值指定为数组和字符串

当我试图从子组件控制台道具时，我在其中找到了我的items对象

“这是我的父组件”

从“/MessageBox”导入MessageBox
导出默认值{
组件：{MessageBox}，
数据（）{
返回{
房间号：1，
资料来源：{}，
};
},
创建（）{
var-app=这个；
get（`/api/room/${app.room\u id}/message`）
。然后（res=>app.source=res.data.data）；
}
};

“这是我的子组件”

从“vue Beauty chat/src/assets/close icon.png”导入CloseIcon；
从“vue Beauty chat/src/assets/logo no bg.svg”导入OpenIcon；
从“vue Beauty chat/src/assets/file.svg”导入文件图标；
从“vue Beauty chat/src/assets/close.svg”导入CloseIconSvg；
导出默认值{
道具：['items']，
数据（）{
返回{
房间号：1，
与会者：[]，
消息列表：[]，
限额：7，
忙：错，
auth\u uid:User.id（），
标题图像URL：
"https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
NewMessageScont:0，
isChatOpen:错误，
alwaysScrollToBottom:false，//当设置为true时，当出现新事件时（新消息，用户开始键入…），始终将聊天滚动到底部
messagestyle:true，
显示类型指示器：“”，
图标：{
开放式：{
img:OpenIcon，
名称：“默认值”
},
关闭：{
img:CloseIcon，
名称：“默认值”
},
文件：{
img:FileIcon，
名称：“默认值”
},
关闭SVG：{
img:CloseIconSvg，
名称：“默认值”
}
},
颜色：{
标题：{
背景：“4e8cff”，
正文：“ffffff”
},
发射器：{
背景：“4e8cff”
},
消息列表：{
背景：“ffffff”
},
信息：{
背景：“4e8cff”，
正文：“ffffff”
},
收到的信息：{
背景：“eaeaea”，
正文：“22222”
},
用户输入：{
背景：“f4f7f9”，
正文：“565867”
}
}
};
},
方法：{
发送消息（文本）{
如果（text.length>0）{
this.newmessagescont=this.isChatOpen
？这是newmessagescont
：this.newmessagescont+1；
这个.onMessageAssent({
作者：“支持”，
键入：“文本”，
数据：{text}
});
axios
.post（`/api/room/${this.room_id}/message`，{body:text}）
。然后（res=>console.log（“消息已发送”）；
}
},
OnMessageAssent（消息）{
//当用户发送消息时调用
this.messageList=[…this.messageList，message]；
},
openChat（）{
//当用户单击fab按钮打开聊天室时调用
this.isChatOpen=true；
this.newmessagescont=0；
},
closeChat（）{
//当用户单击botton关闭聊天时调用
this.isChatOpen=false；
},
handleScrollToTop（）{
//当用户将消息列表滚动到顶部时调用
//利用分页加载另一页消息
},
handleOnType（）{
log（“发出键入事件”）；
},
编辑消息（消息）{
const m=this.messageList.find（m=>m.id==message.id）；
m、 i编辑=正确；
m、 data.text=message.data.text；
},
},
创建（）{
//console.log（这个$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）
});
},
计算：{
itemarr（）{
返回此。$props.items
}
}
};

“控制台错误为

TypeError:Array.prototype.forEach调用为null或未定义

”

---

“我的项目对象的输出是

{{uuuuu ob\uuuuu:Observer}

”

您可以使用

v-if

来解决您的问题。您需要等待ajax响应来呈现子组件

<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>

<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>

<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>

从“/MessageBox”导入MessageBox
导出默认值{
组件：{MessageBox}，
数据（）{
返回{
房间号：1，
资料来源：{}，
};
},
创建（）{
var-app=这个；
get（`/api/room/${app.room\u id}/message`）
。然后（res=>app.source=res.data.data）；
},
获取sourceLength（）{
返回Object.keys（this.source）.length；
}
};

您在道具流程中有一些错误。您需要在子组件属性上声明：propName=“propModel”，然后使用props:['propName']在组件中检索，在API回调完成之前，源将为空，因此将没有任何可迭代的内容。在API回调之后，我从source属性接受其数据。你的意思是我的源属性在页面加载后将为空吗？你能将整个父组件和子组件添加到问题中以更好地理解问题吗？消息框是我的子组件，它可以通过props['items']从父组件接受props项，并且我的父组件也需要props值吗？更新问题，您将

作为父组件。有点困惑。然后你有

消息框

里面有

漂亮的聊天

对吗？我在消息框里面有漂亮的聊天，很抱歉我把

v-if=“source.length>0”

添加到了家长那里，并且可以通过

控制台.log（this.$props.items）

查看项目，但是错误仍然是

创建的钩子中的错误：“TypeError:对null或
<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>


<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>