[Vuejs]-Vue, v-bind: Passing data as a property

by

2👍

✅

You may try this (The key is required in a loop):

<template>
    <div class="log">
       <ChatMessage
           v-for="(message, key) in messages"
           v-bind:message="message"
           v-bind:key="key"
       ></ChatMessage>
    </div>
</template>

Btw, you may use shorthand alternative for v-bind like this:

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

Also, if message is unique, then you may use the message as the value for key like this:

<ChatMessage v-for="message in messages" :message="message" :key="message" />

Note: Read more about the key here.

0👍

You need to specify a key for the given element in the for loop.

<ChatMessage v-for="(message) in messages" v-bind:message="message" :key="message"> </ChatMessage>

Leave a comment