Невозможно получить индекс массива

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>

Но я получаю только сообщение об ошибке:

[Vuewarn]: свойство или метод «index» не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Почему он утверждает, что индекс не определен, в соответствии с документацией это должнобыть действительным?

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/