在迭代vue.js中的对象时访问索引参数时获取未定义

时间:2017-05-31 07:32:30

标签: vue.js

请参阅以下代码。在这里,我使用v-for迭代对象。

在这里我试图访问索引参数,但我把它变成空白。

<a href="#" class="list-group-item" v-for="(event, key, index) in events">
    index is {{index}}
</a>

我也尝试过以下方式,但结果相同:

<a href="#" class="list-group-item" v-for="event in events">
    index is {{$index}}
</a>

这是我的目标:

var events = [{
            name: 'event1',
            description: 'description 1',
        },
        {
            name: 'event2',
            description: 'description 2',
        }
    ];

任何人都可以帮我解决这个问题。我如何在这里访问索引属性。

提前致谢。

2 个答案:

答案 0 :(得分:0)

您的events对象的json格式可能是有可能的。请尝试以下方法:

JSON字符串似乎也不正确。应该引用字段描述以及答案。删除描述数据后的逗号

 [{
            "name": "event1",
            "description": "description 1"
        },
        {
            "name": "event2",
            "description": "description 2"
        }
    ]

在某些情况下,由于JSON格式化,您可能会有一个包含数组的对象:

<a href="#" class="list-group-item" v-for="(event, key, index) in events.**events**"> //events can be .data or events[0]
    index is {{index}}
</a>

<强> DEMO

答案 1 :(得分:0)

  

v-for还支持索引的可选 second 参数   当前项目

没有第三个论点。所以你应该这样写

<a href="#" class="list-group-item" v-for="(event, index) in events">
    index is {{index}}
</a>