Question

我试图将数据作为组件中的属性传递。 v-bind是必需的，但我似乎无法使其工作。错误是HTML中的第3行，v-bind指令不起作用并返回错误：“迭代中的自定义元素需要“ v-bind：key”指令”

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

Answer 1

您可以尝试执行此操作（循环中需要该键）：

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

顺便说一句，您可以使用v-bind的速记替代方法，如下所示：

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

此外，如果消息是唯一的，则可以使用message作为key的值，如下所示：

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

注意：此处有关key的更多信息。

Answer 2

您需要在for循环中为给定元素指定键。

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

Vue，V绑定：将数据作为属性传递

2 个答案: