<template>
   <div class="container">
      <select v-model="selected" :placeholder="$t('select_city')">
         <option v-for="item in this.cities" v-bind:item="item" v-bind:key="item.id" v-bind:value="item">
            {{ item.name }}
         </option>
      </select>
   </div>
</template>

<script>

export default {
   name: 'CitySelection',
   props: ['item'], //TODO useful?
   data() {
   },//TODO useful?
   computed: {
      cities() { return this.$store.getters.getCities; },
      selected: {
         set(value) {
            this.$store.commit('setSelectedCity', value);
         },
         get() {
            return this.$store.state.selectedCity;
         }
      },
   }
};
</script>
