vue.js - 无法获取数组的索引

Question

我试图在使用 v-for 时获取数组的当前索引，如下所示:

<tr v-for="(item,index) in timetable">
    Index: @{{index}}

    <td>@{{ item.subject }}</td>
    <div v-if="index == timetable.length - 1">
        <td>@{{ item.lesson_end }}</td>
    </div>
    <div v-else>
        <td>@{{ item.lesson_start }}</td>
    </div>
</tr>

但我只收到错误消息:

[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

为什么它声称索引未定义，根据文档这应该是有效的？

Answer 1

该问题完全是由于您的 HTML 结构无效造成的。 Vue 的 render 函数无法正确插入结果，因此您会收到该错误。

尝试类似的事情

<tr v-for="(item,index) in timetable">
  <td>Index: @{{ index }}</td>
  <td>@{{ item.subject }}</td>
  <td v-if="index == timetable.length - 1">@{{ item.lesson_end }}</td>
  <td v-else>@{{ item.lesson_start }}</td>
</tr>

http://jsfiddle.net/Lrvdjxpq/