【问题标题】:Vue nested v-for, get index of parentVue嵌套v-for,获取父级索引
【发布时间】:2018-10-20 05:36:16
【问题描述】:

我有一个嵌套的v-for,基本上,我想获取父级v-for 的索引并在子级v-for 内部使用它

<template v-for="(branch, index) in $store.state.agency.branch_users.users">
    <table  class="table" id="agency-contact-table" >
        <thead>
            <tr>
                <th aria-colindex="1" class="">#</th>
                <th aria-colindex="1" class="">Name</th>
            </tr>
        </thead>
        <tbody>
            <tr v-if="branch.role_users" v-for="(branch_users, index) in branch.role_users">
                <td>{{$parent.$index}}</td>
                <td>{{branch_users.user.first_name}} {{branch_users.user.last_name}}</td>
            </tr>
        </tbody>
    </table>
</template>

我尝试使用$parent.$index,但它仍然不起作用。它没有显示任何错误,但也没有数据。 我应该怎么做才能在我的父母 v-for 中获得index?

【问题讨论】:

    标签: vue.js vuejs2 vuex


    【解决方案1】:

    只需用另一个名称定义另一个索引,或将第一个索引命名为parent_index

    <template v-for="(branch, parent_index) in $store.state.agency.branch_users.users">
        <table  class="table" id="agency-contact-table" >
            <thead>
                <tr>
                    <th aria-colindex="1" class="">#</th>
                    <th aria-colindex="1" class="">Name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="branch.role_users" v-for="(branch_users, index) in branch.role_users">
                    <td>{{parent_index}}</td>
                    <td>{{branch_users.user.first_name}} {{branch_users.user.last_name}}</td>
                </tr>
            </tbody>
        </table>
    </template>
    

    【讨论】:

    • 哇,谢谢伙计。我没想到。我认为index 是 vue 中的默认值。我一直在寻找如何在 v-for 中为 index 添加 alias。大声笑
    • 它只是一个变量,你定义它的名字
    猜你喜欢
    • 2020-05-27
    • 2018-06-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-07
    • 1970-01-01
    • 2021-09-13
    • 1970-01-01
    相关资源
    最近更新 更多