Vue-将v-for索引从父组件传递到子组件

Question

我已经做了研究，但找不到一个好的答案。我的父组件和子组件代码如下。如何将父组件中v-for循环的索引传递给子组件以在那里使用？我想为移动屏幕隐藏任何超过#4的仪表，但在桌面上显示所有仪表。

父级：

<div class="col-md-8 col-xs-6">
<div class="row flex-nowrap">
<data-block 
v-for="(gauge, index) in device.gauges" 
:metric="gauge.metric" 
:value="gauge.value" 
:unit="gauge.unit" 
:alarm="gauge.alarm" 
:idx="index">
</data-block>
</div>
</div>

儿童：

app.component('data-block', {
props: ['alarm', 'metric','value','unit','idx'],
template: `<div v-bind:class="'col card px-0 text-center border' + ((alarm) ? ' border-danger':' border-success') + ((idx > 3) ? ' d-none d-md-block':'')">
<div class="card-header p-1">{{metric}}</div>
<div class="card-body p-1 align-middle">
<h1 class=" text-center display-1 font-weight-normal text-nowrap">{{value}}</h1>
</div>
<div class="card-footer p-1">{{unit}}</div>
</div>`,
created: ()=> console.log(this.idx)  //yields "undefined"
})

Answer 1

您正确地传递了idx道具，但与其在created挂钩内检查其值，不如尝试在template中显示它，以确保它不是定时问题(创建子组件时可能不会定义它(：

<div>{{idx}}</div>

此外，为了使代码更易于阅读和编写，我建议您将静态类移动到class属性，将动态类移动到v-bind:class属性，并使其成为多行：

template: `
<div 
class="col card px-0 text-center border"
:class="{
'd-none d-md-block': idx > 3,
'border-danger': alarm,
'border-success': !alarm
}"
>
...
`