0

Имеется следующий код:

export default {
name: 'HowToGet',
template: `
<section class="how-to-get" id="how-to-get">
<div class="container">
    <h3 class=" h3 how-to-get__head">Как добраться</h3>
    <div class="row">
        <div class="col-xl-5">
            <div class="how-to-get__dropdown-wrap">
                <div class="how-to-get__dropdown-title">Откуда выезжаете?</div>
                <div class="dropdown-button dropdown">
                    <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton1" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Москва</button>
                    <div id="city-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton1">
                         <a class="dropdown-button__item dropdown-item" data-transport=""
                         href="javascript:void(0)" v-for="city in cities" @click="changeMap">{{ city.name }}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-7">
            <div class="how-to-get__dropdown-wrap how-to-get__dropdown-wrap_right">
                <div class="how-to-get__dropdown-title">На чем выезжаете?</div>
                <div class="dropdown-button dropdown">
                    <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton2" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Бесплатный трансфер</button>
                    <div v-for="city in cities" id="transport-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton2">
                        <a v-for="transport in city.transport" class="dropdown-button__item dropdown-item" 
                        :data-map-id="transport.dataMapId" href="javascript:void(0)">{{ transport.name }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="how-to-get-tab">
        <nav class="tab-switch nav">
            <a class="tab-switch__link nav-link active" data-template="#map_" href="#map_139" data-toggle="tab" role="tab">Карта</a>
            <a class="tab-switch__link nav-link" data-template="#route_" href="#route_139" data-toggle="tab" role="tab">Описание маршрута</a>
        </nav>
        <div class="tab-content">
             <div class="tab-pane fade show active" id="map_139" role="tabpanel">
                <div class="how-to-get__map-wrap">
                   <div v-for="city in cities" class="how-to-get__map-item">
                      <iframe v-for="transport in city.transport" :src="transport.mapLink" frameborder="0" allowfullscreen="true"></iframe>                        
                   </div>
                </div>
            </div>
            <div class="tab-pane" id="route_139" role="tabpanel">
               <div class="how-to-get__route-wrap">
                  <div class="how-to-get__route-head">Бесплатный трансфер из Москвы 8 и 9 июня</div>
                  <div class="how-to-get__route-text">Для участников и сопровождающих Sport-Marafon Trail организован 8 и 9 июня 2019 г. 
                  трансфер из Москвы прямиком до Никола-Ленивца. Стоимость трансфера в три раза ниже самостоятельной поездки — 700 рублей. 
                    В эту стоимость входит отправление из Москвы и дорога обратно из Никола-Ленивца в Москву. 
                    Отправление автобусов будет происходить от метро Тропарево в субботу 8 июня в 10:00 и в воскресенье 9 июня в 5:00. 
                    Время в дороге займет около 4 часов. Зарегистрироваться на трансфер возможно на странице регистрации</div>
               </div>
            </div>
        </div>
    </div>
</div>
</section>
`,
data() {
    return {
        cities: [
            {
                name:'Москва',
                cityId: '77',
                transport: [
                    {
                        name: 'Бесплатный трансфер',
                        dataMapId: '139',
                        mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9mTkq'
                    },
                    {
                        name: 'Общественный транспорт',
                        dataMapId: '141',
                        mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9F-IK'
                    }
                ]
            },
            {
                name:'Калуга',
                cityId: '40',
                transport: [
                    {
                        name: 'Бесплатный трансфер',
                        dataMapId: '140',
                        mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9JT-K'
                    }
                ]

            }
        ]
    }
},
methods: {
    changeMap() {

    }
  },
};

Как написать функцию для изменения карты при клике на <a class="dropdown-button__item dropdown-item" ></a>? То есть, например, кликаем на Москву – появляется карта, соответствующая Москве, кликаем на Калугу – появляется карта, соответствующая Калуге.

1 ответ 1

1

Решил так:

export default {
name: 'HowToGet',
template: `
<section class="how-to-get" id="how-to-get">
<div class="container">
    <h3 class=" h3 how-to-get__head">Как добраться</h3>
    <div class="row">
        <div class="col-xl-5">
            <div class="how-to-get__dropdown-wrap">
                <div class="how-to-get__dropdown-title">Откуда выезжаете?</div>
                <div class="dropdown-button dropdown">
                    <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton1" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Москва</button>
                    <div id="city-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton1">
                         <a class="dropdown-button__item dropdown-item" data-transport=""
                         href="javascript:void(0)" 
                         v-for="city in cities"
                         @click="selectedCity = city.name"
                         >{{ city.name }}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-7">
            <div class="how-to-get__dropdown-wrap how-to-get__dropdown-wrap_right">
                <div class="how-to-get__dropdown-title">На чем выезжаете?</div>
                <div class="dropdown-button dropdown">
                    <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton2" 
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Бесплатный трансфер</button>
                    <div v-for="city in cities" id="transport-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton2">
                        <a v-for="transport in city.transport" class="dropdown-button__item dropdown-item" 
                        :data-map-id="transport.dataMapId" href="javascript:void(0)">{{ transport.name }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="how-to-get-tab">
        <nav class="tab-switch nav">
            <a class="tab-switch__link nav-link active" data-template="#map_" href="#map_139" data-toggle="tab" role="tab">Карта</a>
            <a class="tab-switch__link nav-link" data-template="#route_" href="#route_139" data-toggle="tab" role="tab">Описание маршрута</a>
        </nav>
        <div class="tab-content">
             <div class="tab-pane fade show active" id="map_139" role="tabpanel">
                <div class="how-to-get__map-wrap" v-if="maps">
                  <iframe v-for="map in maps" :src="map.mapLink" frameborder="0" 
                  allowfullscreen="true"></iframe>
                </div>
            </div>
            <div class="tab-pane" id="route_139" role="tabpanel">
               <div class="how-to-get__route-wrap">
                  <div class="how-to-get__route-head">Бесплатный трансфер из Москвы 8 и 9 июня</div>
                  <div class="how-to-get__route-text">Для участников и сопровождающих Sport-Marafon Trail организован 8 и 9 июня 2019 г. 
                  трансфер из Москвы прямиком до Никола-Ленивца. Стоимость трансфера в три раза ниже самостоятельной поездки — 700 рублей. 
                    В эту стоимость входит отправление из Москвы и дорога обратно из Никола-Ленивца в Москву. 
                    Отправление автобусов будет происходить от метро Тропарево в субботу 8 июня в 10:00 и в воскресенье 9 июня в 5:00. 
                    Время в дороге займет около 4 часов. Зарегистрироваться на трансфер возможно на странице регистрации</div>
               </div>
            </div>
        </div>
    </div>
</div>
</section>
`,
data() {
    return {
        cities: [
            {
                name:'Москва',
                cityId: '77',
                transport: [
                    {
                        name: 'Бесплатный трансфер',
                        dataMapId: '139',
                        mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9mTkq'
                    },
                    {
                        name: 'Общественный транспорт',
                        dataMapId: '141',
                        mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9F-IK'
                    }
                ]
            },
            {
                name:'Калуга',
                cityId: '40',
                transport: [
                    {
                        name: 'Бесплатный трансфер',
                        dataMapId: '140',
                        mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9JT-K'
                    }
                ],
              selectedCity: ''
            }
        ]
    }
},
computed: {
    maps() {
        return (this.cities.find(n => n.name === this.selectedCity) || {}).transport;
    }
},

То есть добавляю свойство selectedCity в data и даю возможность пользователю устанавливать его значение, достаю карты по значению selectedCity. Если город выбран и карты существуют, то они отрисовываются

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.