模板中的道具未与 VueJS 一起显示

Question

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

应用.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' }
]
}
})

页.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。

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

Answer 1

我认为您的财产名称是错误的。只需更改页面.htmlv-bind:senderClass="response.type"即可v-bind:sender-class="response.type"

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

HTML 属性名称不区分大小写。任何大写字符都将被解释为小写。所以骆驼的道具名称需要使用烤肉串的等价物。

Answer 2

除了 Jns 所说的 你可以完全摆脱 v-bind 并只使用 ：varibaleName进行绑定。

链接到小提琴 https://jsfiddle.net/50wL7mdz/654614/#&togetherjs=J9vgbNaR7m