CODEWITHSUNDEEP
vue.jshtml-tablevuejs2
Araw
Araw

Reputation: 2478

Unable to get index of array

I am trying to get the current index of an array when using v-for like so:

<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>

But I only get the error message:

[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.

Why does it claim that index is not defined, according the docs this should be valid?

Upvotes: 2

Views: 338

Answers (1)

Phil
Phil

Reputation: 164730

The problem is solely due to your invalid HTML structure. Vue's render function is not able to interpolate the result correctly and thus, you get that error.

Try something like

<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/

Upvotes: 2

Related Questions