Can't Access Data In Getter When Binding By V-if But Can Access When Rendered By V-for In Vue

I have a table that renders based on computed properties like this. Notice how each row gets its style based on its contents. This works dandy. computed: { rows: function () { retu

Solution 1:

Error seems in this particular code to me, You can not have (item, key, index) with v-for with an array of objects, that syntax is only available with object, see the fiddle.

so You need something like following:

<tr v-for="row in rows" v-bind:class="rowClass(row)">
  <td v-for="(item, index) in row.columns" v-bind:class="classy(index)">{{item}}</td>
</tr>