Add click event to a Vuetify Datatable

Question

I’m trying to activate a function with a click event by clicking on a line of a Datatable in Vuetify, I tried in several ways but I haven’t managed yet. The click event has not been at least recognized yet.

Datatable:

  <v-data-table
      v-model="selected"
      :headers="cabecalho"
      :items="items"
      :search="search"
      click:row
    >
      <template slot="items" slot-scope="props">
          <tr @click:row="redirecionar(props.item.idproblema)">
          <td>{{ props.item.idproblema }}</td>
          <td >{{ props.item.titulo }}</td>
          <td >{{ props.item.estado }}</td>
          <td >{{ props.item.gravidade }}</td>
          <td >{{ props.item.prioridade}}</td>
          <td >{{ props.item.atualizacao }}</td>
          </tr>
        </template>
        </v-data-table>

Function:

redirecionar: function(id){
              localStorage.setItem('pro', id);//seta uma variável na cache do navegador do usuário a partir de uma chave
              this.$router.push('/problema');
        }

Answer 1

The solution was to remove the items and leave the item in the slot.

<template slot="item" slot-scope="props">