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: https://jsfiddle.net/ufw4f5qc/9/ and here's a fiddle what I tried which is producing an error: https://jsfiddle.net/oafw74hz/2/
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?
<tr is="data-row" v-for="record in recordsFiltered" v-bind:record="record" v-bind:columnCollapsed="columnCollapsed"></tr>
In console get the following errors:
vue.js:2611 [Vue warn]: Error when rendering component
Uncaught TypeError: Cannot read property 'Project' of undefined
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! : )