如何更改 v-data-table 中行的活动状态值？

Question

我想将 "active" 行设置为值 "active" 或 "not active"，无论值是真还是假。使用此处的代码，我总是得到 "not active" 值（我已经用 true 或 false 测试了条件，所以我猜我没有在条件中得到任何值）。顺便说一句，如果相关的话，我不能在 data table 中使用 v-for 。谢谢

<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

您正在将值分配给 row.item.active，因此活动变量包含 'active' 或 'not-active' 而不是 true 或 false 这就是为什么您总是得到 'not-active' 因为 row.item.active === true 总是解析为 false

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

更新答案

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

如何更改 v-data-table 中行的活动状态值？

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

html

javascript

vue.js

v-data-table