Vue.js - Pass in Multiple Props to Child in V-For

Question

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! : )

Answer 1

Needed to do:

:column-collapsed="columnCollapsed"

Want hyphens in html, camelCase in JS.

Hope this helps someone! (The answer was thanks to Bill Criswell)