<p dir="auto">when  I  render <strong>form.jade</strong> from <strong>columns.json</strong> ,   I  try to  pass propsData(multi props) to component , but It seems unsupported.    Is there a better way  to do this?</p>
<blockquote>
<p dir="auto">json</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[
  {&quot;title&quot;: &quot;A&quot;, &quot;name&quot;:&quot;a&quot;,  &quot;component&quot;: &quot;ui-dropdown&quot; , &quot;propsData&quot;: {&quot;options&quot;: [], &quot;on&quot;:&quot;hover&quot; }},
  {&quot;title&quot;: &quot;B&quot;, &quot;name&quot;:&quot;b&quot;,  &quot;component&quot;: &quot;ui-dropdown&quot; , &quot;propsData&quot;: {&quot;options&quot;: [] , &quot;on&quot;:&quot;click&quot;}},
]"><pre class="notranslate">[
  {<span class="pl-ent">"title"</span>: <span class="pl-s"><span class="pl-pds">"</span>A<span class="pl-pds">"</span></span>, <span class="pl-ent">"name"</span>:<span class="pl-s"><span class="pl-pds">"</span>a<span class="pl-pds">"</span></span>,  <span class="pl-ent">"component"</span>: <span class="pl-s"><span class="pl-pds">"</span>ui-dropdown<span class="pl-pds">"</span></span> , <span class="pl-ent">"propsData"</span>: {<span class="pl-ent">"options"</span>: [], <span class="pl-ent">"on"</span>:<span class="pl-s"><span class="pl-pds">"</span>hover<span class="pl-pds">"</span></span> }},
  {<span class="pl-ent">"title"</span>: <span class="pl-s"><span class="pl-pds">"</span>B<span class="pl-pds">"</span></span>, <span class="pl-ent">"name"</span>:<span class="pl-s"><span class="pl-pds">"</span>b<span class="pl-pds">"</span></span>,  <span class="pl-ent">"component"</span>: <span class="pl-s"><span class="pl-pds">"</span>ui-dropdown<span class="pl-pds">"</span></span> , <span class="pl-ent">"propsData"</span>: {<span class="pl-ent">"options"</span>: [] , <span class="pl-ent">"on"</span>:<span class="pl-s"><span class="pl-pds">"</span>click<span class="pl-pds">"</span></span>}},
]</pre></div>
<p dir="auto">template :</p>
<div class="highlight highlight-text-jade notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".ui.segment.form.bottom.attached
    .field(v-for=&quot;column in columns&quot;)
        label {{column.title}}
        component(:is=&quot;column.component&quot;,
                           :propsData=&quot;column.propsData&quot;, 
                           :value.sync=&quot;editor[column.name]&quot;)"><pre class="notranslate"><span class="pl-e">.ui.segment.form.bottom.attached</span>
    <span class="pl-e">.field</span><span class="pl-c1">(</span><span class="pl-e">v-for</span>=<span class="pl-s">"column in columns"</span><span class="pl-c1">)</span>
        label {{column.title}}
        component<span class="pl-c1">(</span><span class="pl-e">:is</span>=<span class="pl-s">"column.component"</span>,
                           <span class="pl-e">:propsData</span>=<span class="pl-s">"column.propsData"</span>, 
                           <span class="pl-e">:value.sync</span>=<span class="pl-s">"editor[column.name]"</span><span class="pl-c1">)</span></pre></div>
</blockquote>
<p dir="auto">Of course ,  there is a way to pass props one by one , but it seems not so good.</p>
<div class="highlight highlight-text-jade notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".ui.segment.form.bottom.attached
    .field(v-for=&quot;column in columns&quot;)
        label {{column.title}}
        component(:is=&quot;column.component&quot;, 
                           :options=&quot;column.propsData.options&quot;, 
                           :on=&quot;column.propsData.on&quot;, 
                            :value.sync=&quot;editor[column.name]&quot;)"><pre class="notranslate"><span class="pl-e">.ui.segment.form.bottom.attached</span>
    <span class="pl-e">.field</span><span class="pl-c1">(</span><span class="pl-e">v-for</span>=<span class="pl-s">"column in columns"</span><span class="pl-c1">)</span>
        label {{column.title}}
        component<span class="pl-c1">(</span><span class="pl-e">:is</span>=<span class="pl-s">"column.component"</span>, 
                           <span class="pl-e">:options</span>=<span class="pl-s">"column.propsData.options"</span>, 
                           <span class="pl-e">:on</span>=<span class="pl-s">"column.propsData.on"</span>, 
                            <span class="pl-e">:value.sync</span>=<span class="pl-s">"editor[column.name]"</span><span class="pl-c1">)</span></pre></div>
<p dir="auto">It would be great if we could use v-bind with an object of attributes to pass props to a component.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;component is=&quot;component&quot; v-bind=&quot;data&quot;&gt;&lt;/component&gt;"><pre class="notranslate"><code class="notranslate">&lt;component is="component" v-bind="data"&gt;&lt;/component&gt;
</code></pre></div>
<p dir="auto">Currently we need to explicitly state the props we are passing to the component.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;component is=&quot;component&quot; :prop-a=&quot;propA&quot; :prop-b=&quot;propB&quot;&gt;&lt;/component&gt;"><pre class="notranslate"><code class="notranslate">&lt;component is="component" :prop-a="propA" :prop-b="propB"&gt;&lt;/component&gt;
</code></pre></div>
<p dir="auto"><a href="http://jsbin.com/yudivokovi/edit?html,js,output" rel="nofollow">http://jsbin.com/yudivokovi/edit?html,js,output</a></p>