Vue - Zip codes

by shamaleyte

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<script src="https://fonts.googleapis.com/css?family=Material+Icons"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
   <v-container class="no-arrow customized">
			<v-row>
			 <v-col cols="12">	

				<v-autocomplete
												v-model="q3.selectedZips"
												:items="q3.zipcodeList"
												filled
												chips
												color="blue-grey lighten-2"								 
												label="Suchen"
												multiple								 								
												prepend-inner-icon="mdi-magnify"														
												>			 

				 <template v-slot:prepend-item>
					<v-list-item
											 class="group"
											 ripple
											 @click="toggleAllZips"
											 >
					 <v-list-item-action>
						<v-icon>
						 {{ iconZip }}
						</v-icon>
					 </v-list-item-action>
					 <v-list-item-content>
						<v-list-item-title>
						 PLZ-Gebiete {{ q3.zipcodeList.length }}
						</v-list-item-title>
					 </v-list-item-content>
					</v-list-item>
				 </template>

				</v-autocomplete>
			 </v-col>
			</v-row> 
		 </v-container>
     <div class="text-center chip-wrapper">
			<div><span class="selected_chips">Ihre Auswahl ({{ q3.selectedZips.length }})</span>
			 <v-btn
							v-if="q3.selectedZips.length > 0"
							close
							color="primary"
							dark
							@click="q3.selectedZips = []"
							class="reset"
							>
				zurĂĽcksetzen
			 </v-btn>		
			</div>
      <v-chip close v-if="q3.allZipSelected">
        PLZ-Gebiete {{...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [],
    model: [],
    search: "",
    showed : false,  
    q3 : {
      selectedCountries: [],		
      isGermany : false,		
      substep : 0,
      picked_q_3_01 : "",		
      allZipSelected : false,
      zipcodeList : [

        "01xxx",
        "02xxx",
        "03xxx",
        "04xxx",
        "06xxx",
        "07xxx",
        "08xxx",
        "09xxx",
        "10xxx",
        "11xxx",
        "12xxx",
        "13xxx",
        "14xxx",
        "15xxx",
        "16xxx",
        "17xxx",
        "18xxx",
        "19xxx",
        "20xxx",
        "21xxx",
        "22xxx",
        "23xxx",
        "24xxx",
        "25xxx",
        "26xxx",
        "27xxx",
        "28xxx",
        "29xxx",
        "30xxx",
        "31xxx",
        "32xxx",
        "33xxx",
        "34xxx",
        "35xxx",
        "36xxx",
        "37xxx",
        "38xxx",
        "39xxx",
        "40xxx",
        "42xxx",
        "44xxx",
        "45xxx",
        "46xxx",
        "47xxx",
        "48xxx",
        "49xxx",
        "50xxx",
        "51xxx",
        "52xxx",
        "53xxx",
        "54xxx",
        "55xxx",
        "56xxx",
        "57xxx",
        "58xxx",
        "59xxx",
        "60xxx",
        "61xxx",
        "63xxx",
        "64xxx",
        "65xxx",
        "66xxx",
        "67xxx",
        "68xxx",
        "69xxx",
        "70xxx",
        "71xxx",
        "72xxx",
        "73xxx",
        "74xxx",
        "75xxx",
        "76xxx",
        "77xxx",
        "78xxx",
        "79xxx",
        "80xxx",
        "81xxx",
        "82xxx",
        "83xxx",
        "84xxx",
        "85xxx",
        "86xxx",
        "87xxx",
        "88xxx",
        "89xxx",
        "90xxx",
        "91xxx",
        "92xxx",
        "93xxx",
        "94xxx",
        "95xxx",
        "96xxx",
        "97xxx",
        "98xxx",
        "99xxx",

      ],
      selectedZips : [],					
      selectedStates : [],	
     ...