title: How to bind extra props to component rendered by v-for?
body: <p>This is a newbie question but I cannot find answer/hint online:</p>
  
  <p>For a basic template that is rendered by a v-for loop:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="app"&gt;
      &lt;ul class="list"&gt;
          &lt;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"&gt;
          &lt;/v-ml_component&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;template id="list-template"&gt;
      &lt;li&gt;
          &lt;span v-if="messageType.indexOf('inbox') &gt;= 0"&gt;{{ item.MessageId }}&lt;/span&gt;
          &lt;span&gt;{{index}}&lt;/span&gt; : {{ item.Subject }}
      &lt;/li&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Everything is straight forward as in basic example, except I need to pass a prop to this component:</p>
  
  <pre class="lang-js prettyprint-override"><code>$.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
          }
      });
  });
  </code></pre>
  
  <p>This would get error in console that messageType is not passed to this component. I wonder how the value of this property can be passed to a template that is rendered with a v-for loop?</p>