address: use multiselect for country selection

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue

@@ -1,29 +1,47 @@
 <template>
    <div class="container">
-      <select
-         v-model="selected">
-         <option :value="{}" selected disabled>{{ $t('select_country') }}</option>
-         <option
-            v-for="item in this.countries"
-            v-bind:item="item"
-            v-bind:key="item.id"
-            v-bind:value="item"
-            v-bind:selected="item.countryCode === 'FR'">
-            {{ item.name.fr }}
-         </option>
-      </select>
+      <VueMultiselect
+         v-model="value"
+         name="field"
+         track-by="id"
+         label="name"
+         :custom-label="transName"
+         :placeholder="$t('select_country')"
+         :options="countries"
+         @update:model-value="selectCountry"
+         :model-value="value">
+      </VueMultiselect>
    </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
 
 export default {
    name: 'CountrySelection',
+   components: { VueMultiselect },
    props: ['address', 'getCities'],
-   // data: () => {
-   //    selected: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
-   // },
+   data() {
+      return {
+         //value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0],
+         value: null,
+         options: []
+      }
+   },
+   methods: {
+      transName ({ name }) {
+         return name.fr //TODO multilang
+      },
+      selectCountry(value) {
+         this.address.selected.country = value;
+         this.getCities(value);
+      },
+   },
    computed: {
+      // defaultCountry() {
+      //    const countries = this.address.loaded.countries;
+      //    return countries.filter(c => c.countryCode === 'FR')[0];
+      // },
       countries() {
          const countries = this.address.loaded.countries;
          let orderedCountries = [];
@@ -31,17 +49,9 @@ export default {
          orderedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
          orderedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
          return orderedCountries;
-      },
-      selected: {
-         set(value) {
-            console.log('selected value', value.name);
-            this.address.selected.country = value;
-            this.getCities(value);
-         },
-         get() {
-            return this.address.selected.country;
-         }
       }
    }
 };
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>