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

Question

I've been trying to pass a prop in a component's template. I think I'm missing some points here, and I didn't start to include my components in single files yet.

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

Output :

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

As we see, senderClass won't show up. I've tried different methods and only got errors that I could understand after reading around.

I don't wish to use response.type instead of senderClass because in the meantime, I'm setting senderClass after mounted with a real css class.

Maybe it's my approach that's completely wrong, could you give me some hints ?

Answer 1

I think the name of your property is wrong. Just change in page.html v-bind:senderClass="response.type" to v-bind:sender-class="response.type"

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

HTML attribute names are case-insensitive. Any uppercase character will be interpreted as lowercase. So camelCased prop names need to use their kebab-cased equivalents.

Answer 2

Apart from what Jns said You could get rid of v-bind altogether and just use : varibaleName for bindings.

Link to fiddle https://jsfiddle.net/50wL7mdz/654614/#&togetherjs=J9vgbNaR7m