Vue - 将 v-for 索引从 parent 传递到 child 组件

Question

我已经进行了研究，但找不到合适的答案。我的 parent 和 child 组件代码如下。如何将 parent 中 v-for 循环的索引传递给 child 组件以便在那里使用？我想在移动屏幕上隐藏 #4 之后的任何仪表，但在桌面上显示所有仪表。

Parent:

<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"
})

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
   }"
 >
 ...
`

Vue - 将 v-for 索引从 parent 传递到 child 组件

Vue - passing v-for index from parent to child component

vue.js

vue-component

vuejs3