Vue.js - 将多个道具传递给 V-For 中的子级

Posted 2023-02-16

【中文标题】Vue.js - 将多个道具传递给 V-For 中的子级

【英文标题】：Vue.js - Pass in Multiple Props to Child in V-For

【发布时间】：2017-05-15 13:14:01

【问题描述】：

我正在尝试创建一个包含可折叠列的表格，但无法让表格主体与标题一起折叠。这是一个小提琴，它清楚地表明了我想要做什么：https://jsfiddle.net/ufw4f5qc/9/ 这是一个我尝试过的小提琴，它产生了一个错误：https://jsfiddle.net/oafw74hz/2/

该问题很可能与子级和父级的范围有关。我正在使用道具将一个变量从父母传递给孩子，但孩子似乎不接受它。我是否正确绑定了道具 columnCollapsed？

<tr is="data-row" v-for="record in recordsFiltered" v-bind:record="record" v-bind:columnCollapsed="columnCollapsed"></tr>

在控制台出现以下错误：

vue.js:2611 [Vue 警告]：渲染组件时出错

未捕获的类型错误：无法读取未定义的属性“项目”

旁注：您可能会注意到我在父组件和子组件中重复了某些方法和过滤器（formatDollars、formatPercent 等）的代码 - 如果您对在它们之间共享此代码有任何提示，请让我知道！ :)

【参考方案1】：

需要做的：

:column-collapsed="columnCollapsed"

想要 html 中的连字符，JS 中的 camelCase。

希望这对某人有所帮助！ （答案要感谢 Bill Criswell）