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

Posted 2023-03-16

【中文标题】Vue - 将 v-for 索引从父组件传递到子组件

【英文标题】：Vue - passing v-for index from parent to child component

【发布时间】：2021-01-11 23:03:20

【问题描述】：

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

【问题讨论】：

你试过控制台登录mounted钩子吗？

你有任何错误吗？ this 在箭头函数内不应该是正确的

你对箭头的看法是对的——我忘记了。我确实首先在挂载的钩子中尝试过，但没有得到任何东西，但我正在改变很多变量，试图让它在当时工作，并且可能忽略了一些东西。感谢您的帮助。

【参考方案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
   "
 >
 ...
`

【讨论】：

嗯 - 我以前没有见过 v-bind 的事情，但我是新手。 “：”显然是条件。感谢您的建议。