Question

我有一个需要呈现列表的组件。但是，我尝试使用的每种方式都会给我该错误的一些版本：

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

代码：

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>
    `
});

Answer 1

将v-for：“邮件中的邮件”更改为v-for =“邮件中的邮件”

Vue.js组件未在v-for上生成列表

1 个答案: