vue.js - 如何将额外的道具绑定到 v-for 渲染的组件？

Question

这是一个新手问题，但我在网上找不到答案/提示：

对于由 v-for 循环呈现的基本模板：

<div id="app">
    <ul class="list">
        <v-ml_component v-for="data_item in get_data.Value" 
                        v-bind:item="data_item" 
                        v-bind:index="data_index" 
                        v-bind:key="data_item.id" 
                        v-bind:messageType="messageType">
        </v-ml_component>
    </ul>
</div>

<template id="list-template">
    <li>
        <span v-if="messageType.indexOf('inbox') >= 0">{{ item.MessageId }}</span>
        <span>{{index}}</span> : {{ item.Subject }}
    </li>
</template>

一切都很简单，就像基本示例一样，除了我需要向这个组件传递一个道具：

$.getJSON(mockAjaxUrl).done(function(ajaxdata){
    var messageType = 'inbox';
    Vue.component('v-ml_component', {
        template:'#list-template',
        props:['index', 'item', 'messageType']
    });

    var vm = new Vue({
        el:"#app",
        data:{
            messageType: messageType,
            get_data: ajaxdata
        }
    });
});

这将在控制台中出现 messageType 未传递给此组件的错误。我想知道如何将此属性的值传递给使用 v-for 循环呈现的模板？

Answer 1

messageType道具将采用HTMLmessage-type格式。

请参阅Vue 文档中的camelCase 与 kebab-case。