时间戳

首页 > 解决方案 > 模板中的道具未与 VueJS 一起显示

vue.js - 模板中的道具未与 VueJS 一起显示

问题描述

我一直在尝试在组件的模板中传递一个道具。我想我在这里遗漏了一些要点，而且我还没有开始将我的组件包含在单个文件中。

应用程序.js

Vue.component('chat-response', {
    props: ['response', 'senderClass'],
    template: '<div>From {{ senderClass }} : {{ response.text }}</div>'
})

var app = new Vue({
    el: '#app_chat',
    data: {
        responseList: [
            { id: 0, text: 'Response 1', type: 'Owner' },
            { id: 1, text: 'Response 2', type: 'Other' },
            { id: 2, text: 'Response 3', type: 'None' }
        ]
    }
})

page.html

...
<chat-response v-for="response in responseList"
                                   v-bind:key="response.id"
                                   v-bind:response="response"
                                   v-bind:senderClass="response.type"></chat-response>
...

输出：

From : Response 1
From : Response 2
From : Response 3

如我们所见， senderClass 不会出现。我尝试了不同的方法，但只有在阅读后才能理解的错误。

我不想使用response.type而不是senderClass因为与此同时，我在安装了一个真正的 css 类之后设置了 senderClass 。

也许这是我的方法完全错误，你能给我一些提示吗？

标签： vue.js

解决方案

我认为您的财产名称是错误的。只需将page.html v-bind:senderClass="response.type"更改为v-bind:sender-class="response.type"

http://jsfiddle.net/eywraw8t/310360/

HTML 属性名称不区分大小写。任何大写字符都将被解释为小写。所以camelCased 道具名称需要使用他们的kebab-cases 等价物。

推荐阅读