How can I add a click event to the v-data-table? : <p>I want to call the editItem function  when the table row is clicked. Current what happens is I click on the table row and it doesn't display the details page. Yet when I put this click event on a particular table data the editItem function gets called. How can I make this same function to be called on the table row itself? </p>

<p>Here in my code I have tried using the the v-data-table template and slot and included the click event on the row but it is not working either</p>

<pre><code>&lt;template slot="items" slot-scope="props"&gt;
   &lt;tr @click="editItem(item), selected = item.id"&gt;
      &lt;td&gt;{{ props.item.member }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[1] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[2] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[3] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[4] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[5] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[6] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[7] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[8] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[9] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[10] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[11] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[12] }}&lt;/td&gt;
      &lt;td&gt;{{ props.item[13] }}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/template&gt;
</code></pre>

<p>I expect that when the row is clicked, the editItem function is called</p>
