How can I change row's active state value in v-data-table?

Question

I want to set the "active" row to values "active" or "not active" wheter the value is true or false. With my code here, I always get "not active" value (I've tested the condition both with true or false, so my guess is I'm not getting any value in condition). By the way, I can't use v-for in data table if that's relevant. Thanks

<v-data-table :items="locations" :headers="headers" class="elevation-1">

  <template slot="item" slot-scope="row">
    <tr>
      <td class="text-xs-right">{{ row.item.code }}</td>
      <td class="text-xs-right">{{ row.item.name }}</td>
      <td class="text-xs-right">{{ row.item.descr }}</td>
      <td class="text-xs-right">{{ row.item.dateFrom }}</td>
      <td class="text-xs-right">{{ row.item.dateTo }}</td>
      <td :class="row.item.active === true ? row.item.active='active' : row.item.active='not active'" class="text-xs-right">{{ row.item.active }}</td>
    </tr>
  </template>

</v-data-table>

Answer 1

You are assigning the value to row.item.active so the active variable contains 'active' or 'not-active' instead of true or false that is why you always get 'not-active' since the row.item.active === true always resolves to false

<td :class="(row.item.active === true ? 'active' : 'not-active') + ' text-xs-right'">{{ row.item.active }}</td>

---

Updated Answer

<td class="text-xs-right">{{ row.item.active ? 'active' : 'not active' }}</td>