我已经进行了研究,但找不到合适的答案。我的父子组件代码如下。如何将父级中 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>
child :
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"
})
最佳答案
您正确地传递了 idx
属性,但是与其在 created
钩子(Hook)中检查它的值,不如尝试在 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
}"
>
...
`
关于vue.js - Vue - 将 v-for 索引从父组件传递到子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64067018/