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/