How to pull data from a Vuetify Datatable selected row

Question

I have a Vuetify Datatable

             <v-data-table
                :headers="headers"
                :items="members"
                item-key="id"
                v-model="selected"
                :search="search"
              >
                <template slot="items" slot-scope="props">
                  <tr :active="props.selected" @click="select(props.item)">
                    <td>{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.FirstName}}</td>
                    <td class="text-xs-right">{{ props.item.LastName }}</td>
                    <td class="text-xs-right">{{ props.item.email }}</td>
                    <td class="text-xs-right">{{ props.item.department}}</td>
                    <td class="text-xs-right">{{ props.item.division}}</td>
                  </tr>
                </template>

And when I select a row I want to be able to populate an Item on the same page with some of the data such as the name and email in a v-card. I currently have {{msg}}

and in my script I have

         return {
         msg: "",

then

       select(selectedItem) {
  this.selected = [];
  this.members.forEach(item => {
    if (item.id == selectedItem.id) {
      this.selected.push(item);
      this.msg = selectedItem.FirstName;
    }
  });
},

I need to put name into the msg. I feel that I'm going the long way around to get my data and was wondering if someone has a better solution. Thanks for the support.

Answer 1

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item  - selected item
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

or

<style scoped>
  /deep/ tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

Example https://codepen.io/nicolai-nikolai/pen/GRgLpNY