Vue v-for and variable logic unclear-CodePudding

trying to code a chatPage from a tutorial, the tutorial was releases in vue 2.0 and now i wanna use the new vue 3.0 version.

I have a messageContainer which will display the chatMessages. it has the messages as an array and it should loop over them and display each one as a messageItem. Yet, the syntax with the v-for loop says that the new varible, message, is written but never read, when just one line below this is what i am trying to do. what am i missing here?

<div v-for="(message, index) in messages" :key="index" ></div>
<MessageItem :message="message" />

the first mention of message is said to be written and not read. am i not reading it below that?

also im definitely having the values:
[{"id":21,"chat_room_id":1,"user_id":1,"message":"asdas","created_at":"2022-08-27T12:38:27.000000Z","updated_at":"2022-08-27T12:38:27.000000Z","user":{

with kind regards.

CodePudding user response：

The MessageItem should be inside the <div> tag:

<div v-for="(message, index) in messages" :key="index">
    <MessageItem :message="message" />
</div>