title: How to pull data from a Vuetify Datatable selected row
body: <p>I have a Vuetify Datatable</p>
  
  <pre><code>             &lt;v-data-table
                  :headers="headers"
                  :items="members"
                  item-key="id"
                  v-model="selected"
                  :search="search"
                &gt;
                  &lt;template slot="items" slot-scope="props"&gt;
                    &lt;tr :active="props.selected" @click="select(props.item)"&gt;
                      &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.FirstName}}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.LastName }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.email }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.department}}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.division}}&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/template&gt;
  </code></pre>
  
  <p>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}}</p>
  
  <p>and in my script I have</p>
  
  <pre><code>         return {
           msg: "",
  </code></pre>
  
  <p>then</p>
  
  <pre><code>       select(selectedItem) {
    this.selected = [];
    this.members.forEach(item =&gt; {
      if (item.id == selectedItem.id) {
        this.selected.push(item);
        this.msg = selectedItem.FirstName;
      }
    });
  },
  </code></pre>
  
  <p>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. </p>