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

Question

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

3

我已经做了研究，但是找不到一个好的答案。下面是我的父组件和子组件代码。如何将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"
})

- Daemach

1

你尝试在 mounted 钩子中使用控制台日志输出了吗？ - Daniel_Knights

1

您是否遇到了任何错误？this在箭头函数内部不应该正确。 - Daniel_Knights

1

你说的箭头是对的 - 我忘记了。我确实在挂载钩子中尝试过它，但那时我正在更改许多变量，试图让它工作，可能会忽略一些东西。感谢您的帮助。 - Daemach

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlekseyHoffman · Accepted Answer

您已经正确传递了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
   }"
 >
 ...
`