Question

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

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

输出：

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

我们看到，senderClass将不会显示。我尝试了不同的方法，但在阅读后才发现我可以理解的错误。

我不想使用 response.type 代替 senderClass ，因为与此同时，我在之后设置 senderClass >已安装并带有真实的CSS类。

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

Answer 1

我认为您的财产名称错误。只需将 page.html <template> <vue-audio id = "myAudio" :file= "file1"/> </template> <script> import VueAudio from 'vue-audio'; export default { props: { file1: String, }, components: { 'vue-audio': VueAudio, }, mounted (){ setTimeout(function() { document.getElementById('myAudio').play() }, 3000); }, name: 'AudioPlayer', }; </script>更改为v-bind:senderClass="response.type"

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

HTML属性名称不区分大小写。任何大写字符将被解释为小写。因此，骆驼式道具名称需要使用与烤肉串相同的名称。

Answer 2

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

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

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

2 个答案: