Vue.js - 在 V-For 中将多个道具传递给孩子 [英] Vue.js - Pass in Multiple Props to Child in V-For

问题描述

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

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/

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

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 警告]:渲染组件时出错

vue.js:2611 [Vue warn]: Error when rendering component

未捕获的类型错误:无法读取未定义的属性Project"

Uncaught TypeError: Cannot read property 'Project' of undefined

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

推荐答案

需要做的:

:column-collapsed="columnCollapsed"

:column-collapsed="columnCollapsed"

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

Want hyphens in html, camelCase in JS.

希望这对某人有所帮助！(答案感谢 Bill Criswell)

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

这篇关于Vue.js - 在 V-For 中将多个道具传递给孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！