title: Select rows in Vuetify Data Table
body: <p>I was wondering how can I select/unselect a row by clicking a row in a datatable in Vuetify. It would be even better if  I could select a range by using shift+click or shift+arrows but that is another question.</p>
  
  <p>I have tried to update the array I send into the parameter "value" but the rows never get selected in the ui.</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="desserts"
      item-key="id"
      class="elevation-1"
      :value="selectedRows"
      @click:row="rowClicked"
    &gt;&lt;/v-data-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        selected: [],
        selectedRows: [],
        headers: [
          {
            text: "Dessert (100g serving)",
            align: "left",
            sortable: false,
            value: "name"
          },
          { text: "Calories", value: "calories" },
          { text: "Fat (g)", value: "fat" },
          { text: "Carbs (g)", value: "carbs" },
          { text: "Protein (g)", value: "protein" },
          { text: "Iron (%)", value: "iron" }
        ],
        desserts: [
          {
            id: 1,
            name: "Frozen Yogurt",
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: "1%"
          },
          {
            id: 2,
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: "1%"
          },
          {
            id: 3,
            name: "Eclair",
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: "7%"
          },
          {
            id: 4,
            name: "Cupcake",
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: "8%"
          },
          {
            id: 5,
            name: "Gingerbread",
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: "16%"
          },
          {
            id: 6,
            name: "Jelly bean",
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: "0%"
          },
          {
            id: 7,
            name: "Lollipop",
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: "2%"
          },
          {
            id: 8,
            name: "Honeycomb",
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: "45%"
          },
          {
            id: 9,
            name: "Donut",
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: "22%"
          },
          {
            id: 10,
            name: "KitKat",
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: "6%"
          }
        ]
      };
    },
    methods: {
      rowClicked(row) {
        this.swapSelectionStatus(row.id);
        this.log(row);
      },
      swapSelectionStatus(keyID) {
        if (this.selectedRows.includes(keyID)) {
          this.selectedRows = this.selectedRows.filter(
            selectedKeyID =&gt; selectedKeyID !== keyID
          );
        } else {
          this.selectedRows.push(keyID);
        }
      },
      select(e) {
        this.log(e);
      },
      log(logItem) {
        /* eslint-disable no-console */
        console.log(logItem);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>