I am trying to pass data as a property in a component. v-bind is required, but i can't seem to make it work. Error is one line 3 in the HTML, the v-bind directive doesn't work and returns an error: "Custom elements in iteration require a "v-bind:key" directive"
<script> export default { name: "ChatLog", props: { }, components: {ChatMessage}, data() { return { messages: [ { message: "Hey", user: "James" }, { message: "Hola", user: "Jimmy" }, ] } } } </script>
<template> <div class="log"> <ChatMessage v-for="(message) in messages" v-bind:message="message"> </ChatMessage> </div> </template>
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.
您需要在 for 循环中为给定元素指定一个键。
<ChatMessage v-for="(message) in messages" v-bind:message="message" :key="message"> </ChatMessage>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.