[Vuejs]-Clone of Google Data Studio Select with option “only”

There is a feature request for select-all functionality, and apparently it will be possible using to-be-implemented scoped-slot called prepend-item.
So currently you will need some workaround.

Updated codepen with prepend-item slot which came in version 1.2:
https://codepen.io/anon/pen/EdVpmY
_{(must look into filtering more so I’ll update if something changes)}

Note prepend-item is also part of the parent v-list component, so we can’t easily fix controls to the top.

<template slot="prepend-item">
  <v-list-tile @click.stop="selected = selectedAll ? [] : states.slice()">
    <v-list-tile-action>
      <v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
    </v-list-tile-action>
    <v-list-tile-title>Select All</v-list-tile-title>
  </v-list-tile>
  <v-divider class="mt-2"></v-divider>
  <v-list-tile class="search-tile">
    <v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
  </v-list-tile>
</template>

With regards to select-only functionality, you can use already supported scoped-slot item (see scoped slots in API docs) , and add select-only button yourself:

<v-select v-model="selected"
          multiple
>           
    <template slot="item" slot-scope="data">
        <v-list-tile-content>
            <v-list-tile-title>
                {{ data.item }}
            </v-list-tile-title>
        </v-list-tile-content> 

        <v-list-tile-action class="hidden">
            <v-btn @click.stop="selected = [data.item]">ONLY</v-btn>
        </v-list-tile-action>
    </template>
</v-select>

Codepen, note that some CSS is added as well.

Expanded codepen with select-all workaround using watch, and one of the items is "All". So if we want array of selected without "All" we can do something like return this.selected.filter(v => v !== "All") in computed property or wherever it’s needed.