Vue v-for and variable logic unclear

Question

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.

Lucas Surdi Franco · Accepted Answer · 2022-08-28 18:05:28Z

3

The MessageItem should be inside the <div> tag:

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

answered Aug 28, 2022 at 18:05

Lucas Surdi Franco

1813 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue v-for and variable logic unclear

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related