Select country vue component

gistfile1.txt

<template>
    <div class="flag-container col-sm-12">
        <div class="flag-icon" @click="clean">
            <i class="fa fa-globe fa-2x"></i>
        </div>
        <template v-for="(id, selected) in countries">
            <div class="flag-icon"
                 :selected="selected"
                 @click="toggleCountry(id)">
                <vm-country-icon :country="id"></vm-country-icon>
            </div>
        </template>
    </div>
</template>


<script>

    var _ = require('lodash');

    /**
     * Вертикальный список флагов стран.
     * По нажатию на флаг меняется гет страницы и форсится ивент.
     */
    module.exports = {
        data: function () {
            return {
                apiCountries: this.$api.load('countries/list-all'),
                // Cписок стран вида {RU: false, BY: true},
                // заполненный в соответствии с value компонента.
                countries: {},
            }
        },
        watch: {
            'apiCountries.data': function (value){
                this.mergeValueIntoCountries();
            },
            value: function (value){
                // Value поменялся — должны выбраться правильные страны.
                this.mergeValueIntoCountries();
            }
        },
        props: {
            value: {
                validator: function (value){
                    return _.isArray(value) || _.isString(value);
                }
            }
        },
        ready: function (){
            this.mergeValueIntoCountries();
        },
        methods: {
            /**
             * Очистить список стран
             */
            clean: function () {
                // Все страны в false.
                this.countries = _.mapValues(this.countries, function(){ return false });
                this.mergeCountriesIntoValue();
            },
            toggleCountry: function (id){
                this.countries[id] = ! this.countries[id];
                this.mergeCountriesIntoValue();
            },
            /**
             * Получить объект вида {RU: false, ...} из списка стран.
             * Все значения пока false.
             */
            cloneApiCountriesAsList: function () {
                var countries = _.clone(this.apiCountries.data);
                return _.mapValues(countries, function () {
                    return false;
                });
            },
            mergeValueIntoCountries: function (){
                // Получаем пустой список стран
                var country_list = this.cloneApiCountriesAsList();

                // Разбиваем стринг в массив
                var countries_array = this.getValueAsArray();

                // Если страна есть в списке и в массиве, делаем ее true.
                _.each(countries_array, function (country) {
                    if (country_list[country] === false) {
                        country_list[country] = true;
                    }
                });

                this.countries = country_list;
            },
            mergeCountriesIntoValue: function (){
                // Свести в массив выбранные страны;
                var countries = _.keys(_.pick(this.countries, _.identity))

                // Сделать из массива стринг, если это нужно.
                if (this.mode === 'string') {
                    countries = countries.join(',');
                }

                // Отдать родителю.
                this.value = countries;
            },
            getValueAsArray: function () {
                // Вынесем значение в переменную.
                var countries = this.value;

                // Стринг конвертируется в массив.
                if (this.mode === 'string') {
                    // Разобрать стринг 'BY,RU' -> ['BY','RU']
                    countries = countries.split(',');
                    if (!this.value) {
                        // Если пустой стринг, опустошаем массив, иначе выходит [''];
                        countries = [];
                    }
                }

                // Вернем массив.
                return countries;
            }
        },
        computed: {
            mode: function () {
                return _.isArray(this.value) ? 'array' : 'string';
            }
        }
    };
</script>