title: Vue.js - Pass in Multiple Props to Child in V-For
body: <p>I'm trying to create a table with collapsible columns, but can't get the table body to collapse with the headers. Here's a fiddle which makes it clear what I'm trying to do: <a href="https://jsfiddle.net/ufw4f5qc/9/" rel="nofollow noreferrer">https://jsfiddle.net/ufw4f5qc/9/</a> and here's a fiddle what I tried which is producing an error: <a href="https://jsfiddle.net/oafw74hz/2/" rel="nofollow noreferrer">https://jsfiddle.net/oafw74hz/2/</a></p>
  <p>The issue is most likely to do with scope of child and parent. I'm passing in a variable from parent to child using props, but it seems like the child does not take it. Am I binding the prop columnCollapsed correctly?</p>
  <pre><code>&lt;tr is=&quot;data-row&quot; v-for=&quot;record in recordsFiltered&quot; v-bind:record=&quot;record&quot; v-bind:columnCollapsed=&quot;columnCollapsed&quot;&gt;&lt;/tr&gt;
  </code></pre>
  <p>In console get the following errors:</p>
  <blockquote>
  <p>vue.js:2611 [Vue warn]: Error when rendering component </p>
  <p>Uncaught TypeError: Cannot read property 'Project' of undefined</p>
  </blockquote>
  <p><em>Side  note: you may notice I repeated the code for some methods and filters (formatDollars, formatPercent, etc.) in both the parent and child component - if you have any tips on sharing this code between them do let me know! : )</em></p>