Vuejs 组件未在 v-for 上生成列表答案

【问题标题】：Vuejs component not generating list on v-forVuejs 组件未在 v-for 上生成列表
【发布时间】：2019-01-23 14:58:18
【问题描述】：

我有一个需要渲染列表的组件。然而，我尝试的每一种方式都会给我这个错误的一些版本：

属性或方法“消息”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

代码：

Vue.component("vue-home-messages", {
    props: ["user"],
    methods: {
        onClick: function(event, blah) {
            console.log("CLICK: ", event);
            console.log("Blah: ", blah);
        }
    },
    data: function() {
        return {
            messages: [
                {
                    id: 1,
                    sender: {
                        id: 234,
                        name: "Bob Barker"
                    },
                    subject: "Everything is AWESOME!",
                    body: "Etiam vel nisl ipsum."
                },
                {
                    id: 2,
                    sender: {
                        id: 234,
                        name: "Bob Barker"
                    },
                    subject: "Maybe Not",
                    body: "Etiam vel nisl ipsum."
                }
            ]
        }
    },
    template: `
        <div class="col-lg-3">
            <div class="card border-info mb-3" style="max-width: 20rem; margin: auto;">
                <div class="card-header bg-primary text-white">New Messages</div>
                <div class="card-body">
                    <div class="list-group">
                        <a v-for:"message in messages" 
                            href="#" 
                            class="list-group-item list-group-item-action" 
                            @click="onClick">
                            {{ message.sender }} - {{ message.subject }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    `
});

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

将 v-for:"message in messages" 更改为 v-for="message in messages"

【讨论】：

facepalm 我怎么错过了最后一个小时？谢谢。