v-forによってレンダリングされたコンポーネントに余分な小道具をバインドする方法は？

Question

これは初心者の質問ですが、私は答えを見つけることができません/オンラインヒント：

V-ためのループによってレンダリングされる基本的なテンプレートの場合：

<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小道具はHTMLでmessage-typeになります。

VueドキュメントのcamelCase vs. kebab-caseを参照してください。