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

Answer 2

Since there is a binding between the data table and this.selected, you only need to populate msg as a computed property of the component. You don't need to manually add to this.selected by listening to the click event.

computed: {
  msg() {
    const selectedRow = this.selected[0];
      return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
  }
}

EDIT

I've added a minimal example. Note for the item-key prop of v-data-table, you should use unique values.

<template>
<v-card>
  <v-card-text>
    <v-data-table :headers="headers" :items="members" v-model="selected" item-key="id">
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            :disabled="!props.selected && selected.length != 0"
            :indeterminate="!props.selected && selected.length != 0"
          ></v-checkbox>
        </td>
        <td>{{ props.item.firstName}}</td>
        <td>{{ props.item.lastName }}</td>
      </template>
    </v-data-table>
  {{ msg }}
  </v-card-text>
</v-card>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: "Select", value: "id", sortable: false },
        { text: "First Name", value: "firstName", sortable: true },
        { text: "Last Name", value: "lastName", sortable: true }
      ],
      selected: [],
      members: [
        {
          id: 1,
          firstName: "a",
          lastName: "b"
        },
        {
          id: 2,
          firstName: "x",
          lastName: "y"
        }
      ]
    };
  },

  computed: {
    msg() {
      const selectedRow = this.selected[0];
      return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
    }
  }
};
</script>